在 React Native 中，WebView 组件可以让我们在原生应用中嵌入 Web 页面，实现更加丰富的交互功能。本文将详细介绍如何在 React Native 中使用 WebView 组件，并提供示例代码。
一、安装 WebView 组件
在使用 WebView 组件之前，我们需要先安装它。可以通过在终端中输入以下命令来安装：
npm install --save react-native-webview
二、使用 WebView 组件
WebView 组件提供了多种属性和方法，可以满足我们对 Web 页面的各种需求。下面我们将逐一介绍这些属性和方法。
1. source
source 属性用于指定要显示的 Web 页面的地址。它可以是一个字符串，也可以是一个对象。当它是一个字符串时，表示要显示的页面的 URL 地址：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ -------- ---- ---------------
----- --------- - -- -- -
----- ------------- ----
-------- ------------- -------------------------- --
-------
--
------ ------- ----------当 source 是一个对象时，可以设置除了 URL 地址外的其它属性，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ -------- ---- ---------------
----- ---- - -
---------- ------------
------- -- - ---- -- ------- --------- -- ----- -----------
--
----- --------- - -- -- -
----- ------------- ----
--------
---------
----- -----
-------- -------------------------
--
--
-------
--
------ ------- ----------2. injectedJavaScript
injectedJavaScript 属性用于向 WebView 中注入 JavaScript 代码。这个属性可以用来与 WebView 交互，例如获取 WebView 中的数据。下面是一个示例：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ -------- ------- ---- ---------------
----- --------- - -- -- -
----- -------- ---------- - -------------
----- ------------- - -- -- -
-------------------------------------
----- ------ - ---------------------------------------
----------------------------------------------
---
--
----- -------------------- - ------- -- -
------------------------------------------
--
----- ---------- - -------------------
------ -
----- ------------- ----
--------
----------------
------------- --------------------------
--------------------------------
---------------------
------------- -- -
--------------------------------------------- ----------
-- ------
--
--
------- ---------- ----- ----------------------- --
----- ------------------ -----
------- ------------- ----------- -- -------------- --
-------
----- ------------------ -----
----- ----------------- --------------------
-------
-------
--
--
------ ------- ----------在这个示例中，我们使用 injectJavaScript 方法向 WebView 中注入 JavaScript 代码。注入的代码会在 WebView 加载完成后自动执行。代码中使用 window.ReactNativeWebView.postMessage 方法将结果返回给 React Native。
3. onMessage
onMessage 属性用于监听 WebView 中发送的消息。当在 WebView 中调用 window.postMessage 方法时，可以在 React Native 中通过 onMessage 属性接收到消息。下面是一个示例：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ -------- ---- ---------------
----- --------- - -- -- -
----- -------- ---------- - -------------
----- -------------------- - ------- -- -
------------------------------------------
--
------ -
----- ------------- ----
--------
------------- --------------------------
--------------------------------
---------------------
------------- -- -
-------------------------- ----------
-- ------
--
--
----- ------------------ -----
----- ----------------- --------------------
-------
-------
--
--
------ ------- ----------在这个示例中，我们使用 window.postMessage 方法向 React Native 发送消息。通过 onMessage 属性，可以在 React Native 中接收到这个消息。
4. onLoad
onLoad 属性用于在 WebView 加载完成后执行指定的操作。例如，我们可以在 WebView 加载完成后调用 injectJavaScript 方法向 WebView 中注入 JavaScript 代码：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ -------- ---- ---------------
----- --------- - -- -- -
----- ---------- - -------------------
----- ---------- - -- -- -
-------------------------------------
-------------------- ----------
---
--
------ -
----- ------------- ----
--------
----------------
------------- --------------------------
-------------------
--
-------
--
--
------ ------- ----------在这个示例中，我们通过 onLoad 属性监听 WebView 加载完成事件，并在加载完成后向 WebView 中注入一段 JavaScript 代码。这段代码会在控制台输出一条信息。
5. onNavigationStateChange
onNavigationStateChange 属性用于监听 WebView 的导航状态发生变化时执行指定的操作。例如，我们可以在用户点击链接后获取当前页面的 URL 地址：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ -------- ---- ---------------
----- --------- - -- -- -
----- ----- ------- - -------------
----- --------------------------- - ---------- -- -
---------------------
--
------ -
----- ------------- ----
--------
------------- --------------------------
-----------------------------------------------------
--
----- ------------------ -----
----- ----------------- -----------------
-------
-------
--
--
------ ------- ----------在这个示例中，我们通过 onNavigationStateChange 属性监听 WebView 导航状态变化事件，并在导航状态变化后更新当前页面的 URL 地址。
三、总结
本文详细介绍了在 React Native 中使用 WebView 组件的方法，包括设置 source 属性、向 WebView 中注入 JavaScript 代码、监听 WebView 发送的消息以及监听 WebView 导航状态变化事件。通过这些属性和方法，我们可以在 React Native 中实现更加丰富的交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498c73d48841e98945be335