Brak opisu

App.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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. const { data } = event.nativeEvent;
  91. let messageData;
  92. // maybe parse stringified JSON
  93. try {
  94. messageData = JSON.parse(data);
  95. } catch (e) {
  96. console.log(e.message);
  97. }
  98. if (typeof messageData === 'object') {
  99. const { url } = messageData;
  100. // check if this message concerns us
  101. if (url && url.startsWith('http')) {
  102. Linking.openURL(url).catch(error => console.error('An error occurred', error));
  103. }
  104. }
  105. }}
  106. />
  107. <Text style={{ padding: 5 }}>
  108. height: {heightSize.height}, width: {heightSize.width}
  109. </Text>
  110. <AutoHeightWebView
  111. baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
  112. style={{
  113. marginTop: 15
  114. }}
  115. enableBaseUrl
  116. files={[
  117. {
  118. href: 'demo.css',
  119. type: 'text/css',
  120. rel: 'stylesheet'
  121. }
  122. ]}
  123. customStyle={widthStyle}
  124. onError={() => console.log('width on error')}
  125. onLoad={() => console.log('width on load')}
  126. onLoadStart={() => console.log('width on load start')}
  127. onLoadEnd={() => console.log('width on load end')}
  128. onShouldStartLoadWithRequest={result => {
  129. console.log(result);
  130. return true;
  131. }}
  132. onSizeUpdated={widthSize => this.setState({ widthSize })}
  133. source={{ html: widthHtml }}
  134. customScript={widthScript}
  135. />
  136. <Text style={{ padding: 5 }}>
  137. height: {widthSize.height}, width: {widthSize.width}
  138. </Text>
  139. <TouchableOpacity onPress={this.changeSource} style={styles.button}>
  140. <Text>change source</Text>
  141. </TouchableOpacity>
  142. <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
  143. <Text>change style</Text>
  144. </TouchableOpacity>
  145. <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
  146. <Text>change script</Text>
  147. </TouchableOpacity>
  148. </ScrollView>
  149. );
  150. }
  151. }
  152. const styles = StyleSheet.create({
  153. button: {
  154. marginTop: 15,
  155. backgroundColor: 'aliceblue',
  156. borderRadius: 5,
  157. padding: 5
  158. }
  159. });