React Native 的 `WebView` 组件允许在应用内嵌入网页，并通过 `postMessage` 方法与网页中的JavaScript交互。以下是在 React Native 应用中如何使用 `postMessage` 与嵌入的网页通信的步骤：

### 1. 在 React Native 中设置 WebView 组件

首先，在你的 React Native 代码中设置一个 `WebView` 组件，并为其指定一个 `ref` 以便后续可以发送消息：

```jsx
import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const MyComponent = () => {
  const webviewRef = useRef(null);

  return (
    <WebView
      ref={webviewRef}
      source={{ uri: 'https://your-website.com' }}
      onMessage={event => {
        // 处理从网页接收到的消息
        console.log('Received message from web:', event.nativeEvent.data);
      }}
    />
  );
};
```

### 2. 发送消息至网页

当你需要向嵌入的网页发送消息时，可以使用 `postMessage` 方法。例如，你可以在用户点击按钮时发送消息：

```jsx
const sendMessageToWeb = () => {
  const message = 'Hello from React Native!';
  webviewRef.current.postMessage(message);
};

// 在UI中调用此函数，例如一个按钮的 onPress 事件处理器
```

### 3. 在网页中接收和发送消息

在你的网页JavaScript代码中，需要添加监听消息事件的代码。同时，你也可以通过 `window.postMessage` 发送消息回 React Native 应用。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  
  <script>
    // 监听来自 React Native 应用的消息
    window.addEventListener('message', event => {
      console.log('Received message from React Native:', event.data);
      
      // 做出相应处理，如根据消息修改DOM等
      
      // 向 React Native 应用发送消息
      window.ReactNativeWebView.postMessage('Hello from web!');
    });
  </script>
</head>
<body>
  
</body>
</html>
```

注意：在网页代码中发送消息时使用的是 `window.ReactNativeWebView.postMessage` 方法，这是与 React Native `WebView` 组件通信的标准方式。

### 4. 处理来自网页的消息

在 React Native 代码中，你已经设置了 `onMessage` 属性来处理从网页接收到的消息。每当网页通过 `postMessage` 发送消息时，`onMessage` 事件会被触发，并且你可以在事件处理函数中接收和处理这些消息。

上述步骤展示了在 React Native 中如何通过 `WebView` 组件使用 `postMessage` 方法来实现与嵌入网页的双向通信。这种技术可以用于许多场景，如网页表单提交后通知 React Native 应用，或者是在嵌入的游戏中传递分数和状态等。

How to use PostMessage in a React Native webview?

1个答案

1. 在 React Native 中设置 WebView 组件

2. 发送消息至网页

3. 在网页中接收和发送消息

4. 处理来自网页的消息

你的答案