• 技术文章 >web前端 >js教程

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

    奋力向前奋力向前2021-08-17 11:06:17转载1459

    之前的文章《教你怎么使用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里引用的话。H5RN发消息则使用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 <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的基本交互(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:禅境花园,如有侵犯,请联系admin@php.cn删除
    专题推荐:h5 js React
    上一篇:手把手教你使用Angular CDK Portal创建动态内容 下一篇:JS数组学习之一维和二维数组的创建和访问
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• react和vue的区别及优缺点是什么• 浅谈React+Storeon进行状态管理的方法• react是JavaScript吗• react如何引入css
    1/1

    PHP中文网