深入淺析React Native與web的基本交互（附代碼）

第深入淺析ReactNative與web的基本交互（附代碼）Log(WebViewonMessage收到H5參數(shù)：,e.nativeEvent.data);

letparams=e.nativeEvent.data;

params=JSON.parse(params);

Log(WebViewonMessage收到H5參數(shù)json后：,params);

onLoadEnd=(e)={

Log(WebViewonLoadEnde：,e.nativeEvent);

letdata={

source:fromrn,

this.webthis.web.postMessage(JSON.stringify(data));//發(fā)送消息到H5

WebView

ref={(webview)={

this.web=webview;

>JavaScriptEnabled={true}//指定WebView中是否啟用JavaScript

startInLoadingState={true}//強制WebView在第一次加載時先顯示loading視圖

renderError={(e)={

returnView/

/

H5和ReactNative交互

!DOCTYPEhtml

html

head

metacharset=UTF-8/

titletextwebview/title

scripttype=application/javascript

//相互通信只能傳遞字符串類型

functiontest(){

//發(fā)送消息到rn

letparams={

msg:h5torn,

source:H5,

window.postMessage(JSON.stringify(params));//發(fā)送消息到rn

window.document.addEventListener(message,function(e){

//注冊事件接收數(shù)據(jù)

constmessage=e.data;//字符串類型

console.log(WebViewmessage:,message);

window.postMessage(message);

/script

/head

body

h1chuchur/h1

buttonquot;test()單擊/button

/body

/html

假如你的WebView是從react-native里引用的話。H5向RN發(fā)消息則使用window.postMessage(message)為了減少ReactNative的表面積，將從ReactNative核心中刪除，推薦使用

import{WebView}fromreact-native//會被移除

import{WebView}fromreact-native-webview

假如是用react-native-webview引入則通訊方式使用window.ReactNativeWebView.postMessage(message)

有關(guān)更多信息，請閱讀地址/react-native-community/discussions-and-proposals/issues/6提案。

原生調(diào)用H5方法

[wkWebViewevaluateJavaScript:@js方法名()completionHandler:^(id_Nullableresponse,NSError*_Nullableerror){

if(!error){//成功

NSLog(@%@,response);

}else{//失敗

NSLog(@%@,error.localizedDescription);

}];

H5調(diào)用原生方法

//App端：

//1.WKWebView注入ScriptMessageHandler

[wkWebView.configuration.userContentControlleraddScriptMessageHandler:(idWKScriptMessageHandler)scriptMessageHandlername:@xxx

//2.提供setWebViewAppearance方法，這樣就能反射出H5即將傳來的字符串@setWebViewAppearance

-(void)setWebViewAppearance{

//H5端：

//1.獲取handler

varhandler={

callHander:function(json){

if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){//ios

window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json))

if(/(Android)/i.test(navigator.userAgent)){//Android

window.xxx.postMessage(JSON.stringify(json));

//2.設(shè)置調(diào)用App方法所需要的傳出的參數(shù)（這里是json格式）

functionsetAppAppearance(){

handler.callHander({

body:setWebViewAppearance,

buttons:[

text:分享,

action:

title:這是webView的標(biāo)題

//3.H5調(diào)用自己的設(shè)置方法,繼而調(diào)用了原生客戶端的方法

setAppAppearance();

提示報錯：

WKJavaScri