深入浅析React Native与web的基本交互（附代码）
React Native和H5交互
//接收来自H5的消息
onMessage = (e) => {
Log("WebView onMessage 收到H5参数：", e.nativeEvent.data);
let params = e.nativeEvent.data;
params = JSON.parse(params);
Log("WebView onMessage 收到H5参数 json后：", params);
};
onLoadEnd = (e) => {
Log("WebView onLoadEnd e：", e.nativeEvent);
let data = {
source: "from rn",
};
this.web && this.web.postMessage(JSON.stringify(data)); //发送消息到H5
};
{
this.web = webview;
}}
style={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
}}
source={require("../data/testwebview.html")}
onLoadEnd={this.onLoadEnd} //加载成功或者失败都会回调
onMessage={(e) => this.onMessage(e)}
javaScriptEnabled={true} //指定WebView中是否启用JavaScript
startInLoadingState={true} //强制WebView在第一次加载时先显示loading视图
renderError={(e) => {
return
H5和React Native交互
text webview
chuchur
注意事项
假如你的WebView是从react-native里引用的话。H5向RN发消息则使用window.postMessage(message)为了减少React Native的表面积，将从React Native核心中删除，推荐使用
import { WebView } from "react-native"; //会被移除
//to
import { WebView } from "react-native-webview";
假如是用react-native-webview引入则通讯方式使用window.ReactNativeWebView.postMessage(message)
有关更多信息，请阅读地址https://github.com/react-native-community/discussions-and-proposals/issues/6提案。
原生调用 H5 方法
[wkWebView evaluateJavaScript:@"js方法名()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (!error) { // 成功
NSLog(@"%@",response);
} else { // 失败
NSLog(@"%@",error.localizedDescription);
}
}];
H5 调用原生方法
//App端： // 1. WKWebView注入ScriptMessageHandler [wkWebView.configuration.userContentController addScriptMessageHandler:(id)scriptMessageHandler name:@"xxx"]; // 2. 提供setWebViewAppearance方法，这样就能反射出H5即将传来的字符串@"setWebViewAppearance" - (void)setWebViewAppearance { } //H5端： // 1. 获取handler var handler = { 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. 设置调用App方法所需要的传出的参数（这里是json格式） function setAppAppearance(){ handler.callHander({ 'body':"setWebViewAppearance", 'buttons': [ { "text":"分享", "action":"" } ], 'title':"这是webView的标题" }); } // 3. H5调用自己的设置方法,继而调用了原生客户端的方法 setAppAppearance();
提示报错：
WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx
需要方法需要挂在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx
以上就是深入浅析React Native与web的基本交互（附代码）的详细内容，更多请关注毛票票其它相关文章！