React Native和web交互
原作者：Chuchur 链接：https://www.chuchur.com/article/interaction-between-html-react-native
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
};
ref={(webview) => { 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交互
chuchur
注意事项
假如你的WebView是从react-native里引用的话.H5 向RN发消息则使用window.postMessage(message)为了减少React Native的表面积，
import {WebView} from 'react-native'; //会被移除
//to
import {WebView} from 'react-native-webview';
假如是用react-native-webview引入则通讯方式使用window.ReactNativeWebView.postMessage(message)
有关更多信息，请阅读**Slimmening提案**。
原生调用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
// 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();