React Navigation 是一个非常流行的 React Native 应用导航库。它提供了一个灵活的导航 API，能够轻松构建和管理多层嵌套的堆栈导航和标签导航等等。本文将向你介绍如何在 React Native 中使用 React Navigation 库来实现导航功能，并包含详细的示例代码。
步骤1：安装 React Navigation
要在 React Native 应用中使用 React Navigation，首先需要将其安装到项目中。可以通过以下命令在项目中安装 React Navigation：
npm install @react-navigation/native
安装完成后，还需要安装 React Navigation 的依赖库：
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
步骤2：设置导航器
一旦 React Navigation 被安装到项目中，就可以开始构建导航器以实现导航功能。导航器是 React Navigation 中最重要的组成部分，它定义了应用程序中所有可用页面之间的关系和导航逻辑。
可以使用 ccreact-navigation-stack 库来创建堆栈导航器：
npm install @react-navigation/stack
导航器的创建需要在 App.js 文件中进行，并且导航器需要作为组件的根组件。以下是创建堆栈导航的基本代码，包括三个页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------------- - ---- --------------------------
------ - ------------------- - ---- ---------------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------- --
------------- ------------ ----------------- --
------------- -------------- ------------------- --
------------------
----------------------
--
-
------ ------- ----步骤3：添加导航功能
一旦导航器被设置，就需要将导航功能与每个页面进行绑定。在每个页面中，都需要使用 React Navigation 提供的 hook 来获取导航属性，以便在每个页面之间进行导航。
以下是定义 Home 页面时使用的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - ------------- - ---- ---------------------------
-------- ------ -
----- ---------- - ----------------
------ -
------
------------- -- ---- -----------
-------
--------- -- ------
----------- -- -----------------------------
--
-------
--------- -- --------
----------- -- -------------------------------
--
-------
--
-
------ ------- -----在上面的代码中，使用了 useNavigation() hook 来获取导航属性。在该页面的返回按钮上点击时调用了 navigate() 方法进行页面跳转。
结论
在本文中，我们向你展示了如何通过 React Navigation 在 React Native 项目中实现导航功能。我们覆盖了如何安装 React Navigation 和导航器的设置，以及如何使用导航功能在每个页面之间进行导航。希望这篇文章能够帮助你更好地理解 React Navigation，并能在项目中实现导航功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ede1c2e7021665efa3369