ReactネイティブのWebView Javascriptの更新

Question

React Nativeのユーザー入力に基づいてWebViewの値を更新する際に問題があります。私はWebViewでD3.jsを使用してチャートを作成しようとしています。表示されるチャートはユーザーの入力に依存します。 ここに私の問題の例があります。クリックされた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, 
} 
}); 

Answer 1

これは、注入されたjavascriptの代わりにメッセージを使用して実行できました。ウェイビューはこの種の問題にはあまり適していないので（React Nativeのd3の図表）、ビクトーチャートなどのライブラリを使用するか、反応アートを使用してsvgパスをレンダリングするように勧めます。

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