React Native 中如何使用 WebView 组件？-JavaScript中文网-JavaScript教程资源分享门户

React Native 中如何使用 WebView 组件？

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在 React Native 中，WebView 组件可以让我们在应用程序中嵌入具有网页功能的视图。通过 WebView 组件，我们可以访问互联网以及我们自己的应用程序内的网页。在本文中，我们将详细介绍如何在 React Native 中使用 WebView 组件。

安装 WebView 组件

要使用 WebView 组件，我们需要先安装 react-native-webview 包。通过 npm 命令来安装：

--- ------- --------------------

在应用程序中使用 WebView

安装完 react-native-webview 包后，我们可以开始在应用程序中使用 WebView 组件了。在 JSX 中引入 WebView 组件，并将其嵌入到视图中：

------ ----- ---- --------
------ - ------- - ---- -----------------------

----- -------------- - -- -- -
  ------ -
    --------
      --------- ---- ------------------------ --
      -------- ---------- -- --
    --
  --
--

------ ------- ---------------

在上面的代码中，我们创建了一个名为 WebViewExample 的组件，并使用 React Native 的 WebView 组件来显示 Google 的主页。在组件中，我们将 source 属性设置为一个对象，其中包含网页的 URI，该 URI 将加载到 WebView 中。我们还使用 style 属性来设置顶部边距为 20。

与 WebView 交互

通过 WebView 组件，我们可以与网页进行交互。我们可以使用 injectJavaScript 属性来向网页中注入 JavaScript 代码。在下面的示例中，我们向 Google 的主页注入了一个名为 consoleTest 的 JavaScript 函数：

------ ----- ---- --------
------ - ------- - ---- -----------------------

----- -------------- - -- -- -
  ----- ------------------ - -
    ----------- - -- -- -
      ------------------ ---- -------- -------------
    -
  --

  ------ -
    --------
      --------- ---- ------------------------ --
      -------- ---------- -- --
      ---------------------------------------
    --
  --
--

------ ------- ---------------

在上面的例子中，我们定义了一个名为 injectedJavaScript 的变量，并将其设置为一个包含 consoleTest 函数的字符串。我们通过在 WebView 组件中设置这个变量，就可以在网页中使用 consoleTest 函数来打印消息。

我们也可以使用 onMessage 属性来处理 webView.postMessage() 方法从 WebView 传递给 React Native 的消息。下面是一个例子，当 WebView 中按钮被点击时，它将向 React Native 发送一条消息：

------ ------ - -------- - ---- --------
------ - ------- - ---- -----------------------

----- -------------- - -- -- -
  ----- --------- ----------- - -------------

  ----- --------------- - ----- -- -
    -----------------------------------
  --

  ----- ------------------ - -
    ---------------------------------------------------------- ---------- -
      --------------------------------------------- ----------
    ---
  --

  ------ -
    --------
      --------- ---- ------------------------ --
      -------- ---------- -- --
      ---------------------------------------
      ---------------------------
    --
    ----------------------
  --
--

------ ------- ---------------

在上面的例子中，我们定义了一个名为 handleOnMessage 的函数，该函数将从 WebView 收到的消息设置为 message 状态变量的值。在 WebView 中，我们定义了一个名为 injectedJavaScript 的变量，并为按钮添加了一个名为 click 的事件监听器。当点击按钮时，它将使用 postMessage 方法向 React Native 发送一条消息。通过在 WebView 组件中设置 onMessage 属性来处理从 WebView 发送的消息。

结论

通过本文，我们了解了如何在 React Native 中使用 WebView 组件。我们还深入研究了如何使用注入的 JavaScript 代码与网页交互，以及如何处理来自 WebView 的消息。现在，我们准备好将 WebView 组件添加到我们的应用程序中了！

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/671b6c629babaf620fab5e40