ホームページ > 記事 > ウェブフロントエンド > React Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)

React Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)

奋力向前転載: 2021-08-17 11:04:533718ブラウズ

前回の記事「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>

Notes

If your WebView は react-native から引用されています。 H5メッセージを RN に送信するには、window.postMessage(message)を使用して、React Native## の表面積を削減します。 #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/ で提案を読んでください。議論と提案/論点/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({
        &#39;body&#39;:"setWebViewAppearance",
        &#39;buttons&#39;: [
            {
                "text":"分享",
                "action":""
            }
        ],
        &#39;title&#39;:"这是webView的标题"
    });
  }
  // 3. H5调用自己的设置方法,继而调用了原生客户端的方法
  setAppAppearance();

プロンプトエラー:

WKJavaScriptExceptionMessage=ReferenceError: Can&#39;t find variable xxx
需要方法需要挂在 window 上 window.xxx = function() {}
for vue, mounted: window.xxx =this.xxx

推奨学習: React ビデオチュートリアル

###

以上がReact Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はchuchur.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Angular CDK ポータルを使用して動的コンテンツを作成する方法を段階的に説明します。次の記事：Angular CDK ポータルを使用して動的コンテンツを作成する方法を段階的に説明します。

続きを見る

React Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)

React Native と H5 の間のインタラクション

H5 と React Native の間のインタラクション

Notes

[wkWebView evaluateJavaScript:@"js方法名()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { if (!error) { // 成功 NSLog(@"%@",response); } else { // 失败 NSLog(@"%@",error.localizedDescription); } }];

関連記事