React Native 中如何与 WebView 进行通信？

推荐答案

在 React Native 中，可以通过 WebView 组件的 injectedJavaScript 和 onMessage 属性来实现与 WebView 的通信。具体步骤如下：

1. 从 React Native 向 WebView 发送消息：

   • 使用 injectedJavaScript 属性注入 JavaScript 代码到 WebView 中。
   • 使用 postMessage 方法从 WebView 向 React Native 发送消息。

2. 从 WebView 向 React Native 发送消息：

   • 在 WebView 中通过 window.ReactNativeWebView.postMessage 发送消息。
   • 在 React Native 中通过 onMessage 属性接收消息。

示例代码：

-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ - ------- - ---- -----------------------

----- --------- - -- -- -
  ----- ---------- - -------------

  ----- -------------------- - -- -- -
    -------------------------------------
      ------------------------- ---- ----- ---------
      ----- -- ---- ---- -----
    ---
  --

  ----- ------------- - ------- -- -
    ----- ------- - -----------------------
    --------------------- ------- ---- ---------- ---------
  --

  ------ -
    --------
      ----------------
      --------- ---- --------------------- --
      -------------------------
      ---------------------
        -------------------------------------------- ---- ----------
        ----- -- ---- ---- -----
      --
    --
  --
--

------ ------- ----------

本题详细解读

1. 从 React Native 向 WebView 发送消息

• injectedJavaScript：这个属性允许你在 WebView 加载完成后注入一段 JavaScript 代码。你可以通过这段代码向 WebView 发送消息或执行其他操作。
• postMessage：在注入的 JavaScript 代码中，你可以使用 window.postMessage 方法向 WebView 发送消息。

2. 从 WebView 向 React Native 发送消息

• window.ReactNativeWebView.postMessage：在 WebView 中，你可以通过 window.ReactNativeWebView.postMessage 方法向 React Native 发送消息。这个方法会将消息传递给 React Native 的 onMessage 回调。
• onMessage：在 React Native 中，你可以通过 onMessage 属性来接收来自 WebView 的消息。onMessage 接收一个事件对象，消息内容可以通过 event.nativeEvent.data 获取。

3. 注意事项

• 跨平台兼容性：WebView 组件在不同平台上的行为可能有所不同，特别是在 Android 和 iOS 上。确保在测试时覆盖所有目标平台。
• 安全性：在与 WebView 进行通信时，确保消息内容是安全的，避免注入恶意代码或暴露敏感信息。
• 性能：频繁的消息传递可能会影响性能，尤其是在低端设备上。优化消息传递的频率和内容，以提高应用的响应速度。

通过以上方法，你可以在 React Native 中实现与 WebView 的双向通信，从而在原生应用和 Web 内容之间进行数据交换和交互。