暂无描述

App.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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. scrollableWhenZoomin
  103. scrollEnabled={false}
  104. customStyle={
  105. `
  106. #rnahw-wrapper {
  107. padding: 0 30px;
  108. width: 100vw;
  109. box-sizing: border-box;
  110. }
  111. `
  112. }
  113. onError={onError}
  114. onLoad={onHeightLoad}
  115. onLoadStart={onHeightLoadStart}
  116. onLoadEnd={onHeightLoadEnd}
  117. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  118. onSizeUpdated={setHeightSize}
  119. source={{html: heightHtml}}
  120. customScript={heightScript}
  121. onMessage={onMessage}
  122. />
  123. <Text style={{padding: 5}}>
  124. height: {heightSize.height}, width: {heightSize.width}
  125. </Text>
  126. <AutoHeightWebView
  127. style={{
  128. marginTop: 15,
  129. }}
  130. enableBaseUrl
  131. customStyle={widthStyle}
  132. onError={onError}
  133. onLoad={onWidthLoad}
  134. onLoadStart={onWidthLoadStart}
  135. onLoadEnd={onWidthLoadEnd}
  136. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  137. onSizeUpdated={setWidthSize}
  138. allowFileAccessFromFileURLs={true}
  139. allowUniversalAccessFromFileURLs={true}
  140. source={{
  141. html: widthHtml,
  142. baseUrl:
  143. Platform.OS === 'android' ? 'file:///android_asset/' : 'web/',
  144. }}
  145. customScript={widthScript}
  146. />
  147. <Text style={{padding: 5}}>
  148. height: {widthSize.height}, width: {widthSize.width}
  149. </Text>
  150. <TouchableOpacity onPress={changeSource} style={styles.button}>
  151. <Text>change source</Text>
  152. </TouchableOpacity>
  153. <TouchableOpacity onPress={changeStyle} style={styles.button}>
  154. <Text>change style</Text>
  155. </TouchableOpacity>
  156. <TouchableOpacity
  157. onPress={changeScript}
  158. style={[styles.button, {marginBottom: 100}]}>
  159. <Text>change script</Text>
  160. </TouchableOpacity>
  161. </ScrollView>
  162. );
  163. };
  164. const styles = StyleSheet.create({
  165. button: {
  166. marginTop: 15,
  167. backgroundColor: 'aliceblue',
  168. borderRadius: 5,
  169. padding: 5,
  170. },
  171. });
  172. export default Explorer;