Nav apraksta

App.js 4.6KB

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