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 属性接收消息。

示例代码：

// www.javascriptcn.com code example
import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => {
  const webViewRef = useRef(null);

  const sendMessageToWebView = () => {
    webViewRef.current.injectJavaScript(`
      window.postMessage('Hello from React Native');
      true; // 必须返回 true 以防止警告
    `);
  };

  const handleMessage = (event) => {
    const message = event.nativeEvent.data;
    console.log('Received message from WebView:', message);
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://example.com' }}
      onMessage={handleMessage}
      injectedJavaScript={`
        window.ReactNativeWebView.postMessage('Hello from WebView');
        true; // 必须返回 true 以防止警告
      `}
    />
  );
};

export default MyWebView;

本题详细解读

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 内容之间进行数据交换和交互。