在 React Native 中，导航是一个重要的组件，它允许用户在不同的屏幕之间进行导航。React Navigation 是一个流行的第三方库，它提供了一种简单的方式来实现导航，包括堆栈导航、标签导航和抽屉导航。本文将介绍如何在 React Native 中使用 React Navigation。
安装 React Navigation
首先，我们需要安装 React Navigation。使用以下命令：
npm install @react-navigation/native
然后，我们需要安装所需的依赖项：
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
这些依赖项是必需的，因为 React Navigation 使用了这些库来实现导航。
创建导航器
接下来，我们需要创建一个导航器。导航器是一个组件，它管理我们应用程序中的不同屏幕。我们可以使用 createStackNavigator 函数来创建一个堆栈导航器：
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-在这个例子中，我们创建了一个 Stack 对象，它使用 createStackNavigator 函数创建。然后，我们将 Stack.Navigator 组件包装在 NavigationContainer 组件中。NavigationContainer 组件是必需的，因为它提供了一些必要的上下文和功能，使导航器能够正常工作。
我们还定义了两个屏幕：HomeScreen 和 DetailsScreen。这些组件将在导航器中使用。
屏幕之间的导航
现在，我们已经创建了一个导航器并定义了一些屏幕，我们可以开始使用它们了。在 React Navigation 中，我们可以使用 navigation 对象来导航到不同的屏幕。
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------------
-------
--------- -- --------
----------- -- -------------------------------
--
-------
--
-
-------- --------------- ---------- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------- -------------
-------
--------- -----
----------- -- --------------------
--
-------
--
-在这个例子中，我们使用 navigation.navigate 方法来导航到 DetailsScreen 屏幕。我们还使用 navigation.goBack 方法返回上一个屏幕。
参数传递
有时候，我们需要在屏幕之间传递一些参数。在 React Navigation 中，我们可以使用 navigation 对象的 params 属性来传递参数。
-- -------------------- ---- -------
-------- ------------ ---------- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------- -------------
-------
--------- -- --------
----------- -- ------------------------------ -
------- --
----------- --------- --- ---- ------
---
--
-------
--
-
-------- --------------- ------ ---------- -- -
----- - ------- ---------- - - -------------
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------- -------------
---------- --- ---------------
----------- ------ -------------------
-------
--------- -----
----------- -- --------------------
--
-------
--
-在这个例子中，我们使用 navigation.navigate 方法传递了两个参数：itemId 和 otherParam。在 DetailsScreen 屏幕中，我们可以使用 route.params 对象来获取这些参数。
总结
React Navigation 是一个流行的第三方库，它提供了一种简单的方式来实现导航。在本文中，我们介绍了如何在 React Native 中使用 React Navigation，并演示了如何创建导航器、屏幕之间的导航和参数传递。希望这篇文章能够帮助你更好地了解 React Navigation 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656ee6ddd2f5e1655d7375e5