Нет описания

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. 'use strict'
  2. import React, {
  3. Component,
  4. } from 'react';
  5. import {
  6. ScrollView,
  7. StyleSheet,
  8. Text,
  9. TouchableOpacity,
  10. View
  11. } from 'react-native';
  12. import AutoHeightWebView from 'react-native-autoheight-webview';
  13. export default class Explorer extends Component {
  14. constructor(props) {
  15. super(props);
  16. this.html0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>`;
  17. this.html1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.`;
  18. this.script0 = '';
  19. this.script1 = `document.body.style.background = 'cornflowerblue';`;
  20. this.changeSource = this.changeSource.bind(this);
  21. this.changeScript = this.changeScript.bind(this);
  22. this.state = {
  23. html: this.html0,
  24. script: this.script0,
  25. height: 0
  26. };
  27. }
  28. changeSource() {
  29. this.setState(prevState => ({
  30. html: prevState.html === this.html0 ? this.html1 : this.html0
  31. }));
  32. }
  33. changeScript() {
  34. this.changeSource();
  35. this.setState(prevState => ({
  36. script: prevState.script === this.script0 ? this.script1 : this.script0
  37. }));
  38. }
  39. render() {
  40. return (
  41. <ScrollView
  42. style={{
  43. backgroundColor: 'lightyellow'
  44. }}
  45. contentContainerStyle={{
  46. justifyContent: 'center',
  47. alignItems: 'center'
  48. }}>
  49. <AutoHeightWebView
  50. onError={() => console.log('on error')}
  51. onLoad={() => console.log('on load')}
  52. onLoadStart={() => console.log('on load start')}
  53. onLoadEnd={() => console.log('on load end')}
  54. onShouldStartLoadWithRequest={result => {
  55. console.log(result)
  56. return true;
  57. }}
  58. onHeightUpdated={height => this.setState({ height })}
  59. source={{ html: this.state.html }}
  60. customScript={this.state.script} />
  61. <TouchableOpacity
  62. onPress={this.changeSource}
  63. style={Styles.button}>
  64. <Text>change source</Text>
  65. </TouchableOpacity>
  66. <TouchableOpacity
  67. onPress={this.changeScript}
  68. style={Styles.button}>
  69. <Text>change script (have to change source to reload on android)</Text>
  70. </TouchableOpacity>
  71. <Text style={{ padding: 5 }}>
  72. {this.state.height}
  73. </Text>
  74. </ScrollView>
  75. );
  76. }
  77. }
  78. const Styles = StyleSheet.create({
  79. button: {
  80. marginTop: 15,
  81. backgroundColor: 'aliceblue',
  82. borderRadius: 5,
  83. padding: 5
  84. }
  85. });
  86. // /**
  87. // * Sample React Native App
  88. // * https://github.com/facebook/react-native
  89. // * @flow
  90. // */
  91. // import React, { Component } from 'react';
  92. // import {
  93. // Platform,
  94. // StyleSheet,
  95. // Text,
  96. // View
  97. // } from 'react-native';
  98. // const instructions = Platform.select({
  99. // ios: 'Press Cmd+R to reload,\n' +
  100. // 'Cmd+D or shake for dev menu',
  101. // android: 'Double tap R on your keyboard to reload,\n' +
  102. // 'Shake or press menu button for dev menu',
  103. // });
  104. // export default class App extends Component<{}> {
  105. // render() {
  106. // return (
  107. // <View style={styles.container}>
  108. // <Text style={styles.welcome}>
  109. // Welcome to React Native!
  110. // </Text>
  111. // <Text style={styles.instructions}>
  112. // To get started, edit App.js
  113. // </Text>
  114. // <Text style={styles.instructions}>
  115. // {instructions}
  116. // </Text>
  117. // </View>
  118. // );
  119. // }
  120. // }
  121. // const styles = StyleSheet.create({
  122. // container: {
  123. // flex: 1,
  124. // justifyContent: 'center',
  125. // alignItems: 'center',
  126. // backgroundColor: '#F5FCFF',
  127. // },
  128. // welcome: {
  129. // fontSize: 20,
  130. // textAlign: 'center',
  131. // margin: 10,
  132. // },
  133. // instructions: {
  134. // textAlign: 'center',
  135. // color: '#333333',
  136. // marginBottom: 5,
  137. // },
  138. // });