No Description

App.js 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. 'use strict';
  2. import React, { Component } from 'react';
  3. import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform } 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. 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: null,
  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 === null ? autoWidthScript : null,
  50. heightScript: prevState.heightScript === null ? autoHeightScript : null
  51. }));
  52. };
  53. render() {
  54. const {
  55. heightHtml,
  56. heightSize,
  57. heightStyle,
  58. heightScript,
  59. widthHtml,
  60. widthSize,
  61. widthStyle,
  62. widthScript
  63. } = this.state;
  64. return (
  65. <ScrollView
  66. style={{
  67. paddingTop: 45,
  68. backgroundColor: 'lightyellow'
  69. }}
  70. contentContainerStyle={{
  71. justifyContent: 'center',
  72. alignItems: 'center'
  73. }}
  74. >
  75. <AutoHeightWebView
  76. customStyle={heightStyle}
  77. onError={() => console.log('height on error')}
  78. onLoad={() => console.log('height on load')}
  79. onLoadStart={() => console.log('height on load start')}
  80. onLoadEnd={() => console.log('height on load end')}
  81. onShouldStartLoadWithRequest={result => {
  82. console.log(result);
  83. return true;
  84. }}
  85. onSizeUpdated={heightSize => this.setState({ heightSize })}
  86. source={{ html: heightHtml }}
  87. customScript={heightScript}
  88. />
  89. <Text style={{ padding: 5 }}>
  90. height: {heightSize.height}, width: {heightSize.width}
  91. </Text>
  92. <AutoHeightWebView
  93. baseUrl={Platform.OS === 'Android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
  94. style={{
  95. marginTop: 15
  96. }}
  97. enableBaseUrl
  98. files={[
  99. {
  100. href: 'demo.css',
  101. type: 'text/css',
  102. rel: 'stylesheet'
  103. }
  104. ]}
  105. customStyle={widthStyle}
  106. onError={() => console.log('width on error')}
  107. onLoad={() => console.log('width on load')}
  108. onLoadStart={() => console.log('width on load start')}
  109. onLoadEnd={() => console.log('width on load end')}
  110. onShouldStartLoadWithRequest={result => {
  111. console.log(result);
  112. return true;
  113. }}
  114. onSizeUpdated={widthSize => this.setState({ widthSize })}
  115. source={{ html: widthHtml }}
  116. customScript={widthScript}
  117. />
  118. <Text style={{ padding: 5 }}>
  119. height: {widthSize.height}, width: {widthSize.width}
  120. </Text>
  121. <TouchableOpacity onPress={this.changeSource} style={styles.button}>
  122. <Text>change source</Text>
  123. </TouchableOpacity>
  124. <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
  125. <Text>change style</Text>
  126. </TouchableOpacity>
  127. <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
  128. <Text>change script</Text>
  129. </TouchableOpacity>
  130. </ScrollView>
  131. );
  132. }
  133. }
  134. const styles = StyleSheet.create({
  135. button: {
  136. marginTop: 15,
  137. backgroundColor: 'aliceblue',
  138. borderRadius: 5,
  139. padding: 5
  140. }
  141. });