介绍
React Native 是一个非常受欢迎的跨平台移动应用程序开发框架，npm 是 Node.js 包管理器，这两种技术的结合使得开发移动应用变得更加简单和高效。但是，React Native 并没有提供很好的导航组件，如果要实现类似于 Android 或 iOS 的顶部导航栏，需要使用第三方组件。其中，react-native-top-navigation 是一个非常优秀的导航组件。
本文将介绍 react-native-top-navigation 的使用教程，包括如何安装它、如何初始化、如何添加导航栏和如何进行页面跳转等方面。
安装
使用 npm 包管理器来安装 react-native-top-navigation：
npm install react-native-top-navigation --save
初始化
首先，在需要使用导航栏的页面中引入导航组件：
import TopNavigation from 'react-native-top-navigation';
然后，在组件的 render 方法中添加以下代码：
<TopNavigation
title="标题"
subtitle="副标题"
leftButton={{ icon: "back", onPress: () => goBack() }}
rightButton={{ title: "保存", onPress: () => save() }}
/>其中，参数说明如下：
title：导航栏主标题。subtitle：导航栏副标题。leftButton：左侧按钮对象，包括icon和onPress两个属性。icon：按钮的图标。onPress：按钮被点击时触发的函数。
rightButton：右侧按钮对象，包括title和onPress两个属性，分别表示按钮的文字和点击事件。
页面跳转
在上面的初始化代码中，我们设置了左侧按钮的 onPress 属性和右侧按钮的 onPress 属性，用于实现页面跳转和保存等操作。但是，我们还需要使用 React Native 提供的 Navigation 组件来实现页面的跳转。
首先，在根组件的 render 方法中添加 NavigationContainer 组件：
-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------------
-------- ----- -
------ -
-------------------- --------------------
-----------------
------------- ----------- ---------------- --
------------- -------------- ------------------- --
------------------
----------------------
--
-其中，NavigationContainer 是必须的，它会为应用程序提供导航所需的上下文。Stack.Navigator 表示将使用一个叫做 Stack 的导航器来处理导航。Stack.Screen 表示要在 Stack 导航器中注册的屏幕。
在需要跳转的页面中，使用以下代码实现跳转：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------------
-------- ------------ -
----- ---------- - ----------------
------ -
-------
--------- -- --------
----------- -- -------------------------------
--
--
-其中，useNavigation 是一个用于在函数组件中获取导航对象的 hook，navigate 方法可以用于跳转到另一个页面。
总结
本文介绍了使用 npm 包 react-native-top-navigation 实现导航栏的使用方法，包括安装、初始化和页面跳转。使用 react-native-top-navigation 可以方便地实现类似于 Android 或 iOS 的顶部导航栏，从而提高移动应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa881e8991b448d82ea