React Native에서 WebView Javascript 업데이트

Question

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

Answer 1

주입 된 자바 스크립트 대신 메시지를 사용하여이를 수행 할 수있었습니다. 웹 뷰가 이런 유형의 문제 (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, 
} 
});