WebView是ReactNative中的組件 , 它可以創(chuàng)建一個原生的WebView，可以用于訪問一個網頁.
有時候我們需要在RN與WebView之間進行通信,或者進行數據傳遞,或者發(fā)送消息通知.這時候就要用以下知識了.
一:WebView向RN端發(fā)送數據:
首先,我們構建一個webview:
<WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e) }} />可以看到其中有一個onMessage方法,
onMessage function
在webview內部的網頁中調用window.postMessage方法時可以觸發(fā)此屬性對應的函數，從而實現網頁和RN之間的數據交換。 設置此屬性的同時會在webview中注入一個postMessage的全局函數并覆蓋可能已經存在的同名實現。
網頁端的window.postMessage只發(fā)送一個參數data，此參數封裝在RN端的event對象中，即event.nativeEvent.data。data只能是一個字符串。
由此可見,這個方法是用來接收從Webview(也就是html)中傳來數據的方法.
內部實現是對接收到的數據進行處理:
handleMessage(e) { this.setState({webViewData: e.nativeEvent.data});}e.nativeEvent.data就是從webview內部發(fā)送過來的數據.
光做這個還不 夠, 這只是Rn端的處理,我們還需要在html中寫一個發(fā)送數據的方法:
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ā)送數據.
二: RN向Webview發(fā)送數據:
首先定義一個發(fā)送數據的方法:
sendMessage() { this.refs.webview.postMessage(++this.data);}這步很簡單 .
直接把想發(fā)送的數據作為參數寫在這個方法里就好.
然后, 在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 style="text-align: center"> <button id="button">發(fā)送數據到react native</button> <p style="text-align: center">收到react native發(fā)送的數據: <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() }}>發(fā)送數據到WebView</Text> </View> ) }}const styles = StyleSheet.create({ container: { flex: 1, marginTop: 22, backgroundColor: '#F5FCFF', },});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
