深入浅析React Native与web的基本交互（附代码）

之前的文章《教你怎么使用css3给图片添加渐变效果（代码详解）》中，给大家介绍怎么使用css3给图片添加渐变效果。下面本篇文章给大家介绍一下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}
    ;
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>
      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的表面积，将从React Native核心中删除，推荐使用

import {
 WebView }
     from "react-native";
 //会被移除//toimport {
 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 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

推荐学习：React视频教程

以上就是深入浅析React Native与web的基本交互（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！