溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
WebView是ReactNative中的組件 , 它可以創建一個原生的WebView，可以用于訪問一個網頁.
有時候我們需要在RN與WebView之間進行通信,或者進行數據傳遞,或者發送消息通知.這時候就要用以下知識了.
一:WebView向RN端發送數據:
首先,我們構建一個webview:
<WebView
ref={'webview'}
source={require('./index.html')}
style={{width: 375, height: 220}}
onMessage={(e) => {
this.handleMessage(e)
}}
/>
可以看到其中有一個onMessage方法,
onMessage function
在webview內部的網頁中調用window.postMessage方法時可以觸發此屬性對應的函數，從而實現網頁和RN之間的數據交換。 設置此屬性的同時會在webview中注入一個postMessage的全局函數并覆蓋可能已經存在的同名實現。
網頁端的window.postMessage只發送一個參數data，此參數封裝在RN端的event對象中，即event.nativeEvent.data。data只能是一個字符串。
由此可見,這個方法是用來接收從Webview(也就是html)中傳來數據的方法.
內部實現是對接收到的數據進行處理:
handleMessage(e) {
this.setState({webViewData: e.nativeEvent.data});
}
e.nativeEvent.data就是從webview內部發送過來的數據.
光做這個還不 夠, 這只是Rn端的處理,我們還需要在html中寫一個發送數據的方法:
var data = 0;
function sendData(data) {
if (window.originalPostMessage) {
window.postMessage(data);
} else {
throw Error('postMessage接口還未注入');
}
}
document.getElementById('button').onclick = function () {
data += 100;
sendData(data);
}
window.postMessage就是向RN發送數據.
二: RN向Webview發送數據:
首先定義一個發送數據的方法:
sendMessage() {
this.refs.webview.postMessage(++this.data);
}
這步很簡單 .
直接把想發送的數據作為參數寫在這個方法里就好.
然后, 在html中也要有相應的接收數據的方法:
window.onload = function () {
document.addEventListener('message', function (e) {
document.getElementById('data').textContent = e.data;
});
}
這就可以實現Rn與Webview之間的通信了.
之后放上源碼:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div >
<button id="button">發送數據到react native</button>
<p >收到react native發送的數據: <span id="data"></span></p>
</div>
<script>
var data = 0;
function sendData(data) {
if (window.originalPostMessage) {
window.postMessage(data);
} else {
throw Error('postMessage接口還未注入');
}
}
window.onload = function () {
document.addEventListener('message', function (e) {
document.getElementById('data').textContent = e.data;
});
document.getElementById('button').onclick = function () {
data += 100;
sendData(data);
}
}
</script>
</body>
</html>
web.js:
/**
* Created by 卓原 on 2017/8/17.
* zhuoyuan93@gmail.com
*/
import React from 'react';
import {
View,
Text,
StyleSheet,
WebView
} from 'react-native';
export default class Web extends React.Component {
constructor(props) {
super(props);
this.state = {
webViewData: ''
}
this.data = 0;
}
sendMessage() {
this.refs.webview.postMessage(++this.data);
}
handleMessage(e) {
this.setState({webViewData: e.nativeEvent.data});
}
render() {
return (
<View style={styles.container}>
<View style={{width: 375, height: 220}}>
<WebView
ref={'webview'}
source={require('./index.html')}
style={{width: 375, height: 220}}
onMessage={(e) => {
this.handleMessage(e)
}}
/>
</View>
<Text>來自webview的數據 : {this.state.webViewData}</Text>
<Text onPress={() => {
this.sendMessage()
}}>發送數據到WebView</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 22,
backgroundColor: '#F5FCFF',
},
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
