在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,
}
});

/@flow
"严格使用",；
从“React”导入React，{Component}；
进口{
样式表，
看法
形象,，
文本，
触控高光，
网络视图
}从“反应本机”；
导出默认类WebViewTest扩展组件{
建造师（道具）{
超级（道具）；
此.state={
单击的时间：0
};
this.\u onPressButton=this.\u onPressButton.bind（this）；
this.generateJSCode=this.generateJSCode.bind（this）；
}
_按按钮（）{
让timesClicked=this.state.timesClicked++；
log（timescacked+“Clicked”）；
这是我的国家({
timesClicked:this.state.timesClicked++
});
}
generateJSCode（）{
log（“单击次数：“+this.state.timescalled”）；
让jsCode=`document.getElementById（“content”）.innerHTML=“HTML Times clicked:${this.state.timescacked}”；`；
返回jsCode；
}
render（）{
让html=`
这是我的名字
`;
返回(
按我增加点击
单击的反应本机时间：{this.state.timescacked}
);
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
差额：30
},
网络视图：{
背景颜色：“#fff”，
身高：350，
}
});

我可以使用消息而不是注入的javascript来实现这一点。我想建议人们只使用victory charts之类的库，或者使用react art来呈现svg路径，因为WebView对于此类问题（react Native中的d3图表）并不理想

/@flow
"严格使用",；
从“React”导入React，{Component}；
进口{
样式表，
看法
形象,，
文本，
触控高光，
网络视图
}从“反应本机”；
导出默认类WebViewTest扩展组件{
建造师（道具）{
超级（道具）；
此.state={
单击的时间：0
};
this.\u onPressButton=this.\u onPressButton.bind（this）；
}
_按按钮（）{
让timesClicked=this.state.timesClicked；
时间点++；
log（timescacked+“Clicked”）；
这是我的国家({
timesClicked：timesClicked
});
this.refs.myWebView.postMessage（“这是我的陆地时间”+点击时间）；
}
render（）{
让html=`
这是我的名字
document.addEventListener（“消息”，函数（e）{
document.getElementById（“content”）.innerHTML=e.data；
});
`;
返回(
按我增加点击
单击的反应本机时间：{this.state.timescacked}
);
}
}
让styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
差额：30
},
网络视图：{
背景颜色：“#fff”，
身高：350，
}
});

    // @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,
}
});