[英]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.