React Native Webview と Web プロジェクト間の通信を処理する方法

やあ!これが、React Native Webview と Web Project の間の通信を処理する方法です.より良い解決策の提案をお待ちしています. ✌️

注: 目的はチュートリアル記事ではありません.私が好む方法を共有し、より良い意見を得るためにフィードバックを得るだけです.間違いをお詫びします.

Webview を含む React コンポーネントをコーディングすることから始めましょう.

1)これは、Webviewコンポーネントと戻るボタンを持つ単純なコンポーネントです

export default function App() {
  return (
    <div className="container">
      <div className="backButton">Back</div>

      <WebView 
        source={{ uri: 'https://your-web-project.com' }} 
      /> 
    </div>
  );
}

2) React Native Webview から Web プロジェクトにメッセージを送信します.

私たちのケースは次のとおりです.
戻るボタンがクリックされたときに、Web プロジェクトにメッセージを送信します.

export default function App() {
  const [webviewRef, setWebviewRef] = useState(null);

  // on back button click, send message with postMessage
  const handleBackButton = () => {
    webviewRef.postMessage("goBack");
  }

  return (
    <div className="container">
      <div 
         className="backButton" 
         onClick={() => handleBackButton()}
      >Back</div>

      // We might also send a message when webview loaded.
      <WebView 
        ref={ref => setWebviewRef(ref)}
        source={{ uri: 'https://your-web-project.com' }} 
        onLoadEnd={() => webviewRef.postMessage("webviewLoaded")}
      /> 
    </div>
  );
}

3) Web プロジェクトでメッセージを処理する時が来ました

ここで、React Native プロジェクトは脇に置いておきます.そして、Web プロジェクトでコードを記述します.

// Listen messages received
document.addEventListener("message", (event) => {
   const message = event.data;

   handleMessages(message);
})

// Handle messages
function handleMessages(message) {
   const messageCallbacks = {
      "goBack": handleGoBackMessage,
      "webviewLoaded": handleWebviewLoadedMessage
   }

   messageCallbacks[message]();
}

// Handle go back message
function handleGoBackMessage() {
   window.history.back();
}

// Handle webview loaded message
function handleWebviewLoadedMessage() {
   const body = document.querySelector("BODY");

   body.setAttribute("data-environment", "webview");
}

エクストラパート

4) メッセージの送信元を確認できます.

処理中にメッセージの発信元を確認した方がよい場合があります.そうでない場合、場合によっては問題が発生する可能性があります.たとえば、メッセージがサード パーティのライブラリから受信されている場合、メッセージが競合します.

// Listen messages received
document.addEventListener("message", (event) => {
   const origin = event.origin;
   const message = event.data;

   if(origin === "https://your-web-project.com") {
     handleMessages(message);
   }
})

// Handle messages
function handleMessages(message) {
   const messageCallbacks = {
      "goBack": handleGoBackMessage,
      "webviewLoaded": handleWebviewLoadedMessage
   }

   messageCallbacks[message]();
}

// Handle go back message
function handleGoBackMessage() {
   window.history.back();
}

// Handle webview loaded message
function handleWebviewLoadedMessage() {
   const body = document.querySelector("BODY");

   body.setAttribute("data-environment", "webview");
}

読んでくれてありがとう :)


私のgithubプロファイル:
https://github.com/inancakduvan

私のツイッターアカウント: