1、前言系列九讲解过使用第三方WebViewBridge与Html5之间的通信,但在ReatNative0.37之后,增强的WebView的功能,不需要第三方也可以原生支持互调与传递数据
2、主要代码
export default class Render extends Component {
constructor(props) {
super(props);
this.state = {
msgstr: "",
title:"",
simpleContent:"<!DOCTYPE html>\n<html></html>"
};
}
onMessage(e)
{
Alert.alert(e.nativeEvent.data);
//Alert.alert(this.state.simpleContent);
if (this.refs.webview)
{
this.refs.webview.postMessage("msg('"+e.nativeEvent.data+"')");
}
else
{
Alert.alert("error");
}
}
render () {
//let display = this.state.showText ? this.state.strabc : ' ';
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={true}>
<Text style={styles.hello}> {this.state.title} ,Welcome! </Text>
<WebView
ref='webview'
onMessage={this.onMessage.bind(this)}
automaticallyAdjustContentInsets={false}
style={styles.webView}
source={{ uri:'file:///android_asset/pages/nullpage.html'}}
//injectedJavaScript={this.bootstrapJS()}
injectedJavaScript="document.addEventListener('message', function(e) {eval(e.data);});"
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
scalesPageToFit={true}
/>
</ScrollView>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 12,
margin: 10,
},
contentContainer: {
paddingVertical: 20
},
webView: {
backgroundColor: BGWASH,
height: 350,
},
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function onYeputi1015() {
window.postMessage("Title: yeputi1015");
}
function msg(event) {
document.write("event:"+event);
}
</script>
<h1>Yeputi1015</h1>
<button οnclick="onYeputi1015()">单击</button>
</body>
</html>