[ReactNative] WebViewからpostMessageで値をアプリに渡す

2467 ワード
PostMessage expo reactnative PostMessage テキストリンク

What

  • ReactNative+expoのアプリでWebViewを扱う際に、WebViewから値を直接アプリに渡したい場合の方法です

expoを使用している場合、WebViewを扱うためにはreact-native-webviewをimportする必要があります。
以下、WebViewから値を渡すサンプル

setInterval(function () {window.ReactNativeWebView.postMessage("Hello!")}, 2000)
webViewからアプリに値を渡したい場合、postMessageを使用しますが、注意点として、ReactNativeWebViewを対象にしないと正しく値が渡されないので注意。

アプリ側では、onMessageによって取得したeventからevent.nativeEvent.dataを参照する事で、postMessageの内容を見る事が出来ます。

import { WebView } from "react-native-webview";

function PostMessageExample(props) {
  const html = `
      <html>
      <head></head>
      <body>
        <h1>hoge</h1>
        <script>
          setInterval(function () {
            window.ReactNativeWebView.postMessage("Hello!")
          }, 2000)
        </script>
      </body>
      </html>
    `;
  return (
    <WebView
      source={{ html }}
      onMessage={event => {
        console.log(event.nativeEvent.data);
      }}
    />
  );
}
NSString関連アクション
誰に習いますか:オンライン筆記試験(java)