react native與webview通信的示例代碼
WebView是ReactNative中的組件 , 它可以創(chuàng)建一個(gè)原生的WebView,可以用于訪問一個(gè)網(wǎng)頁.
有時(shí)候我們需要在RN與WebView之間進(jìn)行通信,或者進(jìn)行數(shù)據(jù)傳遞,或者發(fā)送消息通知.這時(shí)候就要用以下知識了.
一:WebView向RN端發(fā)送數(shù)據(jù):
首先,我們構(gòu)建一個(gè)webview:
<WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e) }} />
可以看到其中有一個(gè)onMessage方法,
onMessage function
在webview內(nèi)部的網(wǎng)頁中調(diào)用window.postMessage方法時(shí)可以觸發(fā)此屬性對應(yīng)的函數(shù),從而實(shí)現(xiàn)網(wǎng)頁和RN之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時(shí)會在webview中注入一個(gè)postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)。
網(wǎng)頁端的window.postMessage只發(fā)送一個(gè)參數(shù)data,此參數(shù)封裝在RN端的event對象中,即event.nativeEvent.data。data只能是一個(gè)字符串。
由此可見,這個(gè)方法是用來接收從Webview(也就是html)中傳來數(shù)據(jù)的方法.
內(nèi)部實(shí)現(xiàn)是對接收到的數(shù)據(jù)進(jìn)行處理:
handleMessage(e) { this.setState({webViewData: e.nativeEvent.data}); }
e.nativeEvent.data就是從webview內(nèi)部發(fā)送過來的數(shù)據(jù).
光做這個(gè)還不 夠, 這只是Rn端的處理,我們還需要在html中寫一個(gè)發(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ù):
首先定義一個(gè)發(fā)送數(shù)據(jù)的方法:
sendMessage() { this.refs.webview.postMessage(++this.data); }
這步很簡單 .
直接把想發(fā)送的數(shù)據(jù)作為參數(shù)寫在這個(gè)方法里就好.
然后, 在html中也要有相應(yīng)的接收數(shù)據(jù)的方法:
window.onload = function () { document.addEventListener('message', function (e) { document.getElementById('data').textContent = e.data; }); }
這就可以實(shí)現(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 style="text-align: center"> <button id="button">發(fā)送數(shù)據(jù)到react native</button> <p style="text-align: center">收到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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React State狀態(tài)與生命周期的實(shí)現(xiàn)方法
這篇文章主要介紹了React State狀態(tài)與生命周期的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03react自動化構(gòu)建路由的實(shí)現(xiàn)
這篇文章主要介紹了react自動化構(gòu)建路由的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04create-react-app使用antd按需加載的樣式無效問題的解決
這篇文章主要介紹了create-react-app使用antd按需加載的樣式無效問題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02React18+TS通用后臺管理系統(tǒng)解決方案落地實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了React18+TS通用后臺管理系統(tǒng)解決方案落地實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Input標(biāo)簽自動校驗(yàn)功能去除實(shí)現(xiàn)
這篇文章主要為大家介紹了Input標(biāo)簽的自動拼寫檢查功能去除實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07