在React Native中更新WebView Javascript

我在根据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来做到这一点.我想建议人们只使用像胜利图表这样的库,或者使用react-art来渲染svg路径,因为webview对于这类问题来说并不是最佳的(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,
}
});