No Description

App.js 4.8KB

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