Ei kuvausta

App.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. 'use strict';
  2. import React, { Component } from 'react';
  3. import { ScrollView, StyleSheet, Text, TouchableOpacity } 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. style={{
  94. marginTop: 15
  95. }}
  96. enableBaseUrl
  97. files={[{
  98. href: 'demo.css',
  99. type: 'text/css',
  100. rel: 'stylesheet'
  101. }]}
  102. customStyle={widthStyle}
  103. onError={() => console.log('width on error')}
  104. onLoad={() => console.log('width on load')}
  105. onLoadStart={() => console.log('width on load start')}
  106. onLoadEnd={() => console.log('width on load end')}
  107. onShouldStartLoadWithRequest={result => {
  108. console.log(result);
  109. return true;
  110. }}
  111. onSizeUpdated={widthSize => this.setState({ widthSize })}
  112. source={{ html: widthHtml }}
  113. customScript={widthScript}
  114. />
  115. <Text style={{ padding: 5 }}>
  116. height: {widthSize.height}, width: {widthSize.width}
  117. </Text>
  118. <TouchableOpacity onPress={this.changeSource} style={styles.button}>
  119. <Text>change source</Text>
  120. </TouchableOpacity>
  121. <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
  122. <Text>change style</Text>
  123. </TouchableOpacity>
  124. <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
  125. <Text>change script</Text>
  126. </TouchableOpacity>
  127. </ScrollView>
  128. );
  129. }
  130. }
  131. const styles = StyleSheet.create({
  132. button: {
  133. marginTop: 15,
  134. backgroundColor: 'aliceblue',
  135. borderRadius: 5,
  136. padding: 5
  137. }
  138. });