在使用 React Native 构建移动应用时，导航是必不可少的部分。@react-navigation/native 是一个官方提供的 React Native 导航库，提供了轻松和灵活的导航方式，可以实现基于堆栈、底部标签和抽屉式菜单等不同类型的导航。本文将介绍如何使用 @react-navigation/native 来实现导航功能。
安装 @react-navigation/native
在使用 @react-navigation/native 之前，需要先通过 npm 安装它。打开命令行，定位到你的项目根目录，然后执行以下命令：
npm install @react-navigation/native
安装依赖
@react-navigation/native 需要一些额外的依赖才能正常工作。在安装 @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/native，首先需要创建一个导航器。导航器是用来管理整个应用程序导航的，可以通过以下代码来创建一个简单的导航器：
-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------------
------ - -------------------- - ---- --------------------------
----- ----- - -----------------------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- -------------- ------------------------- --
------------------
----------------------
--
-这个导航器包含两个屏幕：HomeScreen 和 DetailsScreen。可以通过 createStackNavigator() 函数来创建一个堆栈导航器，然后使用 <navigationcontainer> 组件将其包装起来。
添加导航
在屏幕之间导航，可以使用 useNavigation() 和 useRoute() 钩子来访问导航对象和路由参数。可以通过以下代码来展示如何在 HomeScreen 和 DetailsScreen 屏幕之间进行导航：
-- -------------------- ---- -------
------ - -------------- -------- - ---- ---------------------------
-------- ------------ -
----- ---------- - ----------------
------ -
----------------- ----------- -- --------------------------------
-------- -- ------- -------------
-------------------
--
-
-------- --------------- -
----- ----- - -----------
------ -
------
------------- -------------
--------- ------------------------
-------
--
-在 HomeScreen 中，可以使用 useNavigation() 钩子来获取导航对象，然后在 TouchableOpacity 组件的 onPress 事件中调用 navigate() 方法来导航到 DetailsScreen。在 DetailsScreen 中，可以使用 useRoute() 钩子来获取路由参数并显示在屏幕上。
自定义导航栏
可以通过定义自己的导航栏组件来自定义导航栏。可以使用以下代码来展示如何在 HomeScreen 中定义自己的导航栏：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------------
-------- ------------ -
----- ---------- - ----------------
------ -
------
---------- -------------
----------------- ----------- -- --------------------------------
-------- -- ------- -------------
-------------------
-------
--
-
---------------------------- - -
------ -------
------------ -
---------------- ----------
--
---------------- -------
----------------- -
----------- -------
--
--在这个示例中，使用 navigationOptions 属性来指定自定义导航栏的样式和标题。可以通过设置 headerStyle 属性来更改导航栏的背景颜色，通过设置 headerTintColor 属性来更改导航栏中文字的颜色，通过设置 headerTitleStyle 属性来更改导航栏中标题的样式。
结论
@react-navigation/native 是一个非常实用的导航库，可以轻松地实现不同类型导航功能。在本文中，介绍了如何安装 @react-navigation/native，创建导航器，添加导航以及自定义导航栏的方法。在实际项目中，可以根据需要灵活使用 @react-navigation/native 提供的各种导航方式来实现最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabcfb5cbfe1ea0610878