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

devtools/2024/11/14 6:19:54/

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

在移动应用开发中，常常需要在应用中嵌入网页，并实现 App 与 Web 之间的通讯。React Native 提供了一个强大的组件——react-native-webview，可以帮助我们实现这一功能。在这篇文章中，我们将介绍如何使用 react-native-webview 来实现 App 与 Web 的交互。

环境准备

首先，确保你的 React Native 项目中已经安装了 react-native-webview。如果还没有安装，可以使用以下命令：

npm install react-native-webview

或者使用 yarn：

yarn add react-native-webview

基本用法

在你的 React Native 组件中引入 WebView：

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

这样就可以在应用中嵌入一个网页了。

实现 App 与 Web 的通讯

从 Web 向 App 发送消息

要从 Web 向 App 发送消息，可以使用 window.ReactNativeWebView.postMessage 方法。假设我们在网页中有一个按钮，点击后发送消息给 App：

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

在 React Native 中，我们需要设置 onMessage 属性来接收消息：

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

这样，当网页上的按钮被点击时，App 会弹出一个警告框显示来自网页的消息。

从 App 向 Web 发送消息

要从 App 向 Web 发送消息，可以使用 injectJavaScript 方法。我们可以在 WebView 加载完成后，向网页注入 JavaScript 代码：

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