如何使用 React Native WebView 实现 App 与 Web 的通讯

npm install react-native-webview

yarn add react-native-webview

import React from 'react';
import { WebView } from 'react-native-webview';
const MyWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
    />
  );
};
export default MyWebView;

<button onclick="sendMessage()">Send Message to App</button>
<script>
  function sendMessage() {
    window.ReactNativeWebView.postMessage('Hello from Web!');
  }
</script>

const MyWebView = () => {
  const onMessage = (event) => {
    alert(event.nativeEvent.data);
  };
  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
      onMessage={onMessage}
    />
  );
};

const MyWebView = () => {
  const webViewRef = React.useRef(null);
  const sendMessageToWeb = () => {
    const message = "Hello from App!";
    webViewRef.current.injectJavaScript(`alert('${message}');`);
  };
  return (
    <>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://example.com' }}
        style={{ flex: 1 }}
      />
      <Button title="Send Message to Web" onPress={sendMessageToWeb} />
    </>
  );
};