[英]Updating WebView Javascript in React Native
我在根据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,
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.