1.RN向webview傳值，js頁面
import React, { Component } from 'react';
import {
Text,
View,
WebView,
StyleSheet,
AppRegistry,
TouchableOpacity,
} from'react-native';
export default class MyWeb extends Component {
constructor(props){
super(props);
this.state={
webstring:''
}
}
handleMessage(){
const message = 'hello web 199!';
this.webview.postMessage(message);//通過handleMessage向RN傳遞字符串Message,若寫成ref="wbview",這裏寫成this.refs.webview.postMessage(message)
}
render(){
return (
<View style={{flex:1}}>
<Text>{this.state.webstring}</Text>
<TouchableOpacity onPress={this.handleMessage.bind(this)} style={{height:40}}><Text>簡單的網頁</Text></TouchableOpacity>
<WebView
ref={webview =>{ this.webview = webview;}} //或者可以寫成：ref="webview"
source={require('./html/aa.html')}
>
</WebView>
</View>
);
}
}
var styles =StyleSheet.create({
webview:{
backgroundColor:'#ffffff',
}
});<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
document.addEventListener('message', function(e) {
document.getElementById('txt').value=e.data //webview接受RN傳的值
});
</script>
<title>測試頁面</title>
</head>
<body>
<input id="txt" type="text" />
<p>Click on the header to alert its value</p>
</body>
</html>import React, { Component } from 'react';
import {
Text,
View,
WebView,
StyleSheet,
AppRegistry,
TouchableOpacity,
} from'react-native';
export default class MyWeb extends Component {
constructor(props){
super(props);
this.state={
webstring:''
}
}
render(){
return (
<View style={{flex:1}}>
<Text>{this.state.webstring}</Text>
<TouchableOpacity onPress={this.handleMessage.bind(this)} style={{height:40}}><Text>簡單的網頁</Text></TouchableOpacity>
<WebView
ref={webview =>{ this.webview = webview;}}
source={require('./html/aa.html')}
onMessage={(event)=>{this.setState({webstring:event.nativeEvent.data})}}//通過這個函數接受webview傳來的值
>
</WebView>
</View>
);
}
}
var styles =StyleSheet.create({
webview:{
backgroundColor:'#ffffff',
}
});<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var count=0;
function sendValue()
{
window.postMessage(count++) //webview傳遞參數
}
</script>
<title>測試頁面</title>
</head>
<body>
<h1 id="myHeader" onclick="sendValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>