Geen omschrijving

App.js 5.0KB

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