Brak opisu

App.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import React, { useState } from 'react';
  2. import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform, Linking } from 'react-native';
  3. import AutoHeightWebView from 'react-native-autoheight-webview';
  4. import {
  5. autoHeightHtml0,
  6. autoHeightHtml1,
  7. autoHeightScript,
  8. autoWidthHtml0,
  9. autoWidthHtml1,
  10. autoWidthScript,
  11. autoDetectLinkScript,
  12. style0,
  13. inlineBodyStyle
  14. } from './config';
  15. const onShouldStartLoadWithRequest = result => {
  16. console.log(result);
  17. return true;
  18. };
  19. const onError = ({ nativeEvent }) => console.error('WebView error: ', nativeEvent);
  20. const onMessage = event => {
  21. const { data } = event.nativeEvent;
  22. let messageData;
  23. // maybe parse stringified JSON
  24. try {
  25. messageData = JSON.parse(data);
  26. } catch (e) {
  27. console.log(e.message);
  28. }
  29. if (typeof messageData === 'object') {
  30. const { url } = messageData;
  31. // check if this message concerns us
  32. if (url && url.startsWith('http')) {
  33. Linking.openURL(url).catch(error => console.error('An error occurred', error));
  34. }
  35. }
  36. };
  37. const onHeightLoadStart = () => console.log('height on load start');
  38. const onHeightLoad = () => console.log('height on load');
  39. const onHeightLoadEnd = () => console.log('height on load end');
  40. const onWidthLoadStart = () => console.log('width on load start');
  41. const onWidthLoad = () => console.log('width on load');
  42. const onWidthLoadEnd = () => console.log('width on load end');
  43. const Explorer = () => {
  44. const [{ widthHtml, heightHtml }, setHtml] = useState({
  45. widthHtml: autoWidthHtml0,
  46. heightHtml: autoHeightHtml0
  47. });
  48. const changeSource = () =>
  49. setHtml({
  50. widthHtml: widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
  51. heightHtml: heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
  52. });
  53. const [{ widthStyle, heightStyle }, setStyle] = useState({
  54. heightStyle: null,
  55. widthStyle: inlineBodyStyle
  56. });
  57. const changeStyle = () =>
  58. setStyle({
  59. widthStyle: widthStyle === inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
  60. heightStyle: heightStyle === null ? style0 : null
  61. });
  62. const [{ widthScript, heightScript }, setScript] = useState({
  63. heightScript: autoDetectLinkScript,
  64. widthScript: null
  65. });
  66. const changeScript = () =>
  67. setScript({
  68. widthScript: widthScript == autoWidthScript ? autoWidthScript : null,
  69. heightScript:
  70. heightScript !== autoDetectLinkScript ? autoDetectLinkScript : autoHeightScript + autoDetectLinkScript
  71. });
  72. const [heightSize, setHeightSize] = useState({ height: 0, width: 0 });
  73. const [widthSize, setWidthSize] = useState({ height: 0, width: 0 });
  74. return (
  75. <ScrollView
  76. style={{
  77. paddingTop: 45,
  78. backgroundColor: 'lightyellow'
  79. }}
  80. contentContainerStyle={{
  81. justifyContent: 'center',
  82. alignItems: 'center'
  83. }}
  84. >
  85. <AutoHeightWebView
  86. customStyle={heightStyle}
  87. onError={onError}
  88. onLoad={onHeightLoad}
  89. onLoadStart={onHeightLoadStart}
  90. onLoadEnd={onHeightLoadEnd}
  91. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  92. onSizeUpdated={setHeightSize}
  93. source={{ html: heightHtml }}
  94. customScript={heightScript}
  95. onMessage={onMessage}
  96. />
  97. <Text style={{ padding: 5 }}>
  98. height: {heightSize.height}, width: {heightSize.width}
  99. </Text>
  100. <AutoHeightWebView
  101. baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
  102. style={{
  103. marginTop: 15
  104. }}
  105. enableBaseUrl
  106. files={[
  107. {
  108. href: 'demo.css',
  109. type: 'text/css',
  110. rel: 'stylesheet'
  111. }
  112. ]}
  113. customStyle={widthStyle}
  114. onError={onError}
  115. onLoad={onWidthLoad}
  116. onLoadStart={onWidthLoadStart}
  117. onLoadEnd={onWidthLoadEnd}
  118. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  119. onSizeUpdated={setWidthSize}
  120. source={{ html: widthHtml }}
  121. customScript={widthScript}
  122. />
  123. <Text style={{ padding: 5 }}>
  124. height: {widthSize.height}, width: {widthSize.width}
  125. </Text>
  126. <TouchableOpacity onPress={changeSource} style={styles.button}>
  127. <Text>change source</Text>
  128. </TouchableOpacity>
  129. <TouchableOpacity onPress={changeStyle} style={styles.button}>
  130. <Text>change style</Text>
  131. </TouchableOpacity>
  132. <TouchableOpacity onPress={changeScript} style={[styles.button, { marginBottom: 100 }]}>
  133. <Text>change script</Text>
  134. </TouchableOpacity>
  135. </ScrollView>
  136. );
  137. };
  138. const styles = StyleSheet.create({
  139. button: {
  140. marginTop: 15,
  141. backgroundColor: 'aliceblue',
  142. borderRadius: 5,
  143. padding: 5
  144. }
  145. });
  146. export default Explorer;