暂无描述

App.js 5.0KB

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