Brak opisu

explorer.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. 'use strict'
  2. import React, {
  3. Component,
  4. PropTypes
  5. } from 'react';
  6. import {
  7. ScrollView,
  8. StyleSheet,
  9. Text,
  10. TouchableOpacity,
  11. View
  12. } from 'react-native';
  13. import AutoHeightWebView from 'react-native-autoheight-webview';
  14. export default class Explorer extends Component {
  15. constructor(props) {
  16. super(props);
  17. 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>`;
  18. this.html1 = `<p>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>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>`;
  19. this.script0 = '';
  20. this.script1 = `document.body.style.background = 'lightyellow';`;
  21. this.changeHtml = this.changeHtml.bind(this);
  22. this.changeScript = this.changeScript.bind(this);
  23. this.state = {
  24. html: this.html0,
  25. script: this.script0
  26. };
  27. }
  28. changeHtml() {
  29. this.setState(prevState => ({
  30. html: prevState.html === this.html0 ? this.html1 : this.html0
  31. }));
  32. }
  33. changeScript() {
  34. this.changeHtml();
  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. html={this.state.html}
  51. customScript={this.state.script} />
  52. <TouchableOpacity
  53. onPress={this.changeHtml}
  54. style={Styles.button}>
  55. <Text>change html</Text>
  56. </TouchableOpacity>
  57. <TouchableOpacity
  58. onPress={this.changeScript}
  59. style={Styles.button}>
  60. <Text>change script (have to change html to reload)</Text>
  61. </TouchableOpacity>
  62. </ScrollView>
  63. );
  64. }
  65. }
  66. const Styles = StyleSheet.create({
  67. button: {
  68. marginTop: 15,
  69. backgroundColor: 'aliceblue',
  70. borderRadius: 5,
  71. padding: 5
  72. }
  73. });