React Native 是一种用于构建移动应用程序的框架。虽然 React Native 与 React 在构建界面方面有很多共同点，但在导航方面，两者之间是存在差别的。React Navigation 是一个 React Native 中常用的导航库，它可以方便地管理应用程序的导航堆栈，提供了广泛的配置选项和灵活的 API。
本文将详细介绍 React Navigation 的使用方法，并提供一些示例代码，帮助您了解如何在 React Native 中无缝地集成它。
安装和初始化 React Navigation
要使用 React Navigation，首先需要安装它。可以使用 npm 包管理工具安装它：
npm install @react-navigation/native
完成安装后，可以使用 createStackNavigator 函数创建一个堆栈导航器。下面是一个简单的初始化示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------- - ---- ---------------------------
------ - -------------------- - ---- --------------------------
------ ---------- ---- -----------------------
------ ------------- ---- --------------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-
------ ------- ----在上面的示例中， createStackNavigator 函数用于创建一个堆栈导航器。我们包含了两个屏幕：一个主屏幕 HomeScreen 和一个详情屏幕 DetailsScreen。这两个屏幕将由 StackNavigator 管理，并在 NavigationContainer 中呈现。
使用 Stack Navigator
createStackNavigator 函数会返回一个堆栈导航器的实例。通过给导航器提供不同的屏幕，可以创建完整的导航堆栈。在 React Navigation 中，屏幕本质上是一个 React 组件。当一个屏幕从导航器堆栈中弹出时，它会收到一个 navigation 对象，该对象包含用于导航的功能。
考虑以下示例代码：
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------------
-----------------
----------- -- -------------------------------
-------- ---------------- ---------- -------- --- ------------- -- ---------- -- --
-
----- -------- ------ ------ ----- -- ------- -------------
-------------------
-------
--
-
-------- --------------- ---------- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------- -------------
-----------------
----------- -- --------------------
-------- ---------------- ---------- -------- --- ------------- -- ---------- -- --
-
----- -------- ------ ------ ----- ---- -- ---- -------------
-------------------
-------
--
-在这个示例中，我们创建了两个屏幕：HomeScreen 和 DetailsScreen。在主屏幕上，我们有一个按钮，可以导航到详情屏幕。在详情屏幕上，我们有一个按钮，可以返回到主屏幕。
navigation.navigate 方法用于从一个屏幕导航到另一个屏幕。我们可以将需要导航到的屏幕名称作为第一个参数传递，并可选地传递一个对象，以向下一个屏幕传递参数。 navigation.goBack 方法使得从详情屏幕返回到主屏幕非常容易。
使用 Tab Navigator
createBottomTabNavigator 和 createMaterialBottomTabNavigator 函数由 React Navigation 库提供，用于创建一个底部标签导航器。它可以显示多个堆栈导航器，以便用户可以快速访问应用程序中的不同功能。
使用 createBottomTabNavigator 创建标签导航器时，可以传递多个堆栈导航器作为其子组件。每个堆栈导航器对应一个标签项，其名称和图标可以在 screenOptions 中进行自定义。考虑以下示例代码：
-- -------------------- ---- -------
------ - ------------------------ - ---- --------------------------------
----- --- - ---------------------------
-------- ----- -
------ -
---------------------
--------------
----------------- ----- -- -- --
----------- -- -------- ------ ---- -- -- -
--- ---------
-- ----------- --- ------- -
-------- - ------- - ------------------------ - ---------------------------------
- ---- -- ----------- --- ----------- -
-------- - ------- - -------------- - -----------
-
------ --------- --------------- ----------- ------------- ---
--
---
----------------
---------------- ---------
------------------ -------
--
-
----------- ----------- --------------------- --
----------- --------------- ------------------------- --
----------------
----------------------
--
-在上面的示例中，我们使用 createBottomTabNavigator 创建一个底部标签导航器，并定义了两个标签项：Home 和 Settings。在 screenOptions 函数中，我们定义了每个标签项的图标，以及在选定时的颜色。
总结
React Navigation 是一个方便、灵活且易于使用的导航库，它可以在 React Native 中方便地管理应用程序的导航堆栈。本文介绍了 React Navigation 的基本使用方法，包括如何创建堆栈导航器和标签导航器，以及如何使用屏幕之间进行导航。这将有助于您构建出精美、高效的移动应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca274a5ad90b6d0419e210