説明なし

explorer.js 3.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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 = `<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>`;
  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. onHeightUpdated={height => this.setState({ height })}
  51. source={{ html: this.state.html }}
  52. customScript={this.state.script} />
  53. <TouchableOpacity
  54. onPress={this.changeSource}
  55. style={Styles.button}>
  56. <Text>change source</Text>
  57. </TouchableOpacity>
  58. <TouchableOpacity
  59. onPress={this.changeScript}
  60. style={Styles.button}>
  61. <Text>change script (have to change source to reload on android)</Text>
  62. </TouchableOpacity>
  63. <Text style={{ padding: 5 }}>
  64. {this.state.height}
  65. </Text>
  66. </ScrollView>
  67. );
  68. }
  69. }
  70. const Styles = StyleSheet.create({
  71. button: {
  72. marginTop: 15,
  73. backgroundColor: 'aliceblue',
  74. borderRadius: 5,
  75. padding: 5
  76. }
  77. });