在 React Native 中更新 WebView Javascript答案

【问题标题】：Updating WebView Javascript in React Native在 React Native 中更新 WebView Javascript
【发布时间】：2017-05-06 17:29:45
【问题描述】：

我在根据 React Native 中的用户输入更新 WebView 值时遇到问题。我正在尝试使用 D3.js 在 WebView 中制作图表，并且显示的图表取决于用户输入。这是我的问题的一个示例，单击的 HTML 时间未更新。我也尝试在 webview ref 上使用 .reload() ，但这只是给了我一个空白的 html。

    // @flow
'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  WebView
} from 'react-native';

export default class WebViewTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
    timesClicked : 0
  };
  this._onPressButton = this._onPressButton.bind(this);
  this.generateJSCode = this.generateJSCode.bind(this);
  }

  _onPressButton() {
    let timesClicked = this.state.timesClicked++;
    console.log(timesClicked + " Clicked ");
    this.setState({
      timesClicked: this.state.timesClicked++
    });
  }

  generateJSCode() {
    console.log("Times clicked: " + this.state.timesClicked);
    let jsCode = `document.getElementById("content").innerHTML = "HTML Times clicked: ${this.state.timesClicked}";`;
    return jsCode;
  }

  render() {
    let html = `
        <div id="content">
            This is my name
        </div>
    `;

    return (
        <View style={styles.container}>
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Press me to increase click</Text>
          </TouchableHighlight>
          <Text>React Native times clicked: {this.state.timesClicked}</Text>
            <WebView
                style={styles.webView}
                source={{html : html}}
                injectedJavaScript={this.generateJSCode()}
                javaScriptEnabledAndroid={true}
            >
            </WebView>
        </View>
    );
  }
}

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    margin: 30
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

【问题讨论】：

标签： javascript html webview react-native

【解决方案1】：

我能够使用消息而不是注入的 javascript 来做到这一点。我想建议人们只使用诸如victory-charts 之类的库或使用react-art 来呈现svg 路径，因为webviews 并不是解决此类问题的最佳选择（React Native 中的d3 图表）。

    // @flow
'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  WebView
} from 'react-native';

export default class WebViewTest extends Component {

  constructor(props) {
    super(props);
    this.state = {
    timesClicked : 0
  };
  this._onPressButton = this._onPressButton.bind(this);
  }

  _onPressButton() {
    let timesClicked = this.state.timesClicked;
    timesClicked++;
    console.log(timesClicked + " Clicked ");
    this.setState({
      timesClicked: timesClicked
    });
    this.refs.myWebView.postMessage("This is my land times " + timesClicked);
  }

  render() {
    let html = `
        <div id="content">
            This is my name
        </div>
        <script>
          document.addEventListener('message', function(e) {
            document.getElementById("content").innerHTML = e.data;
          });
        </script>
    `;

    return (
        <View style={styles.container}>
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Press me to increase click</Text>
          </TouchableHighlight>
          <Text>React Native times clicked: {this.state.timesClicked}</Text>
            <WebView
                style={styles.webView}
                source={{html : html}}
                ref="myWebView"
                javaScriptEnabledAndroid={true}
                onMessage={this.onMessage}
            >
            </WebView>
        </View>
    );
  }
}

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
    margin: 30
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

【讨论】：