React Native和web交互

最新推荐文章于 2024-08-10 07:56:27 发布

chuchur

最新推荐文章于 2024-08-10 07:56:27 发布

阅读量251

点赞数 1

文章标签： react native

本文链接：https://blog.csdn.net/chuchur/article/details/105488089

版权

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
};
        <WebView
            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 <View/>;
            }}
        />

H5和React Native交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text webview</title>
    <script type="application/javascript">
        //相互通信只能传递字符串类型
        function test() { //发送消息到rn
            let params = {
               msg:'h5 to rn',
                source:'H5',
            };
            window.postMessage(JSON.stringify(params));//发送消息到rn
        }

        window.document.addEventListener('message', function(e) {//注册事件 接收数据
            const message = e.data;//字符串类型
            console.log('WebView message:',message);
            window.postMessage(message);
        })
    </script>
</head>
<body>
<h1>chuchur</h1>
<button onclick=test()>单击</button>
</body>
</html>

注意事项

假如你的WebView 是从 react-native 里引用的话.H5 向RN发消息则使用window.postMessage(message)
为了减少React Native的表面积，<WebView/>将从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 <WKScriptMessageHandler>)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