Bez popisu

App.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. export default class Explorer extends Component {
  6. constructor(props) {
  7. super(props);
  8. 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>`;
  9. 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”.`;
  10. this.script0 = '';
  11. this.script1 = `document.body.style.background = 'cornflowerblue';`;
  12. this.state = {
  13. html: this.html0,
  14. script: this.script0,
  15. height: 0
  16. };
  17. }
  18. changeSource = () => {
  19. this.setState(prevState => ({
  20. html: prevState.html === this.html0 ? this.html1 : this.html0
  21. }));
  22. };
  23. changeScript = () => {
  24. this.changeSource();
  25. this.setState(prevState => ({
  26. script: prevState.script === this.script0 ? this.script1 : this.script0
  27. }));
  28. };
  29. render() {
  30. const { html, script, height } = this.state;
  31. return (
  32. <ScrollView
  33. style={{
  34. backgroundColor: 'lightyellow'
  35. }}
  36. contentContainerStyle={{
  37. justifyContent: 'center',
  38. alignItems: 'center'
  39. }}
  40. >
  41. <AutoHeightWebView
  42. onError={() => console.log('on error')}
  43. onLoad={() => console.log('on load')}
  44. onLoadStart={() => console.log('on load start')}
  45. onLoadEnd={() => console.log('on load end')}
  46. onShouldStartLoadWithRequest={result => {
  47. console.log(result);
  48. return true;
  49. }}
  50. onHeightUpdated={height => this.setState({ height })}
  51. source={{ html }}
  52. customScript={script}
  53. />
  54. <TouchableOpacity onPress={this.changeSource} style={styles.button}>
  55. <Text>change source</Text>
  56. </TouchableOpacity>
  57. <TouchableOpacity onPress={this.changeScript} style={styles.button}>
  58. <Text>change script (have to change source to reload on android)</Text>
  59. </TouchableOpacity>
  60. <Text style={{ padding: 5 }}>{height}</Text>
  61. </ScrollView>
  62. );
  63. }
  64. }
  65. const styles = StyleSheet.create({
  66. button: {
  67. marginTop: 15,
  68. backgroundColor: 'aliceblue',
  69. borderRadius: 5,
  70. padding: 5
  71. }
  72. });