您好,登錄后才能下訂單哦!
WebView是ReactNative中的組件 , 它可以創(chuàng)建一個原生的WebView,可以用于訪問一個網(wǎng)頁.
有時候我們需要在RN與WebView之間進行通信,或者進行數(shù)據(jù)傳遞,或者發(fā)送消息通知.這時候就要用以下知識了.
一:WebView向RN端發(fā)送數(shù)據(jù):
首先,我們構(gòu)建一個webview:
<WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e) }} />
可以看到其中有一個onMessage方法,
onMessage function
在webview內(nèi)部的網(wǎng)頁中調(diào)用window.postMessage方法時可以觸發(fā)此屬性對應(yīng)的函數(shù),從而實現(xiàn)網(wǎng)頁和RN之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時會在webview中注入一個postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實現(xiàn)。
網(wǎng)頁端的window.postMessage只發(fā)送一個參數(shù)data,此參數(shù)封裝在RN端的event對象中,即event.nativeEvent.data。data只能是一個字符串。
由此可見,這個方法是用來接收從Webview(也就是html)中傳來數(shù)據(jù)的方法.
內(nèi)部實現(xiàn)是對接收到的數(shù)據(jù)進行處理:
handleMessage(e) { this.setState({webViewData: e.nativeEvent.data}); }
e.nativeEvent.data就是從webview內(nèi)部發(fā)送過來的數(shù)據(jù).
光做這個還不 夠, 這只是Rn端的處理,我們還需要在html中寫一個發(fā)送數(shù)據(jù)的方法:
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發(fā)送數(shù)據(jù).
二: RN向Webview發(fā)送數(shù)據(jù):
首先定義一個發(fā)送數(shù)據(jù)的方法:
sendMessage() { this.refs.webview.postMessage(++this.data); }
這步很簡單 .
直接把想發(fā)送的數(shù)據(jù)作為參數(shù)寫在這個方法里就好.
然后, 在html中也要有相應(yīng)的接收數(shù)據(jù)的方法:
window.onload = function () { document.addEventListener('message', function (e) { document.getElementById('data').textContent = e.data; }); }
這就可以實現(xiàn)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">發(fā)送數(shù)據(jù)到react native</button> <p >收到react native發(fā)送的數(shù)據(jù): <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的數(shù)據(jù) : {this.state.webViewData}</Text> <Text onPress={() => { this.sendMessage() }}>發(fā)送數(shù)據(jù)到WebView</Text> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 22, backgroundColor: '#F5FCFF', }, });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。