如何使用 React Native WebView 實現(xiàn) App 與 Web 的通訊

更新時間：2024年12月25日 14:25:41 作者：wakangda

通過 react-native-webview,我們可以輕松實現(xiàn) App 與 Web 的雙向通訊,這種技術非常適合需要在移動應用中嵌入復雜網(wǎng)頁功能的場景,感興趣的朋友一起看看吧

使用 React Native WebView 實現(xiàn) App 與 Web 的通訊

在移動應用開發(fā)中，常常需要在應用中嵌入網(wǎng)頁，并實現(xiàn) App 與 Web 之間的通訊。React Native 提供了一個強大的組件——react-native-webview，可以幫助我們實現(xiàn)這一功能。在這篇文章中，我們將介紹如何使用 react-native-webview 來實現(xiàn) App 與 Web 的交互。

環(huán)境準備

首先，確保你的 React Native 項目中已經(jīng)安裝了 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 (
    <WebView
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
    />
  );
};
export default MyWebView;

這樣就可以在應用中嵌入一個網(wǎng)頁了。

實現(xiàn) App 與 Web 的通訊

從 Web 向 App 發(fā)送消息

要從 Web 向 App 發(fā)送消息，可以使用 window.ReactNativeWebView.postMessage 方法。假設我們在網(wǎng)頁中有一個按鈕，點擊后發(fā)送消息給 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 (
    <WebView
      source={{ uri: 'https://example.com' }}
      style={{ flex: 1 }}
      onMessage={onMessage}
    />
  );
};

這樣，當網(wǎng)頁上的按鈕被點擊時，App 會彈出一個警告框顯示來自網(wǎng)頁的消息。

從 App 向 Web 發(fā)送消息

要從 App 向 Web 發(fā)送消息，可以使用 injectJavaScript 方法。我們可以在 WebView 加載完成后，向網(wǎng)頁注入 JavaScript 代碼：

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} />
    </>
  );
};

在這個例子中，點擊按鈕時，會在網(wǎng)頁中彈出一個警告框顯示來自 App 的消息。