如何在React Native App中使用React-Navigation

导航在移动应用程序中起着重要作用。如果没有导航，则几乎不会使用任何应用程序。在本教程中，我们将从头开始学习如何在React Native应用程序中实现Navigation。如果您熟悉Web或Reactjs作为库，那么导航的总体概念是相同的。它用于导航到不同的页面或屏幕（在我们的示例中）。但是，此处导航库的实现不同于Web。

入门

在构建移动应用程序之前，建议您花一些时间来规划应用程序如何处理导航和路由。在本模块中，我们将介绍可用的不同导航技术。首先，让我们设置项目。我们将为此使用react native CLI工具 。如果尚未安装，请键入第一行，否则，请跳过第一条命令。

接下来，我们将导航到新的项目目录，并通过运行以下命令来运行项目以查看一切是否正常。

之后，我们将安装在应用程序中实现导航所需的依赖项。

现在，我们已经创建了最低限度的应用程序并安装了必需的依赖项，我们可以从创建组件开始，并研究不同的导航技术。

堆栈导航

堆栈导航正是单词堆栈所指的。它是一堆屏幕或应用程序页面，可以从顶部删除它们。它遵循一种简单的机制， 后进先出 。它堆叠导航器，这意味着在彼此之间添加屏幕。为了实现这一点，我们将在目录src/创建三个屏幕。如果目录名称不可用，请创建一个。这三个屏幕是.js文件： ScreenOne ， ScreenTwo和ScreenThree 。

注意，在所有三个屏幕中，我们都可以将navigation.state作为props，将navigationOptions作为静态对象。 navigationOptions带有屏幕标题Welcome的标题选项。在上方的应用程序屏幕中，您将在工具栏中看到“欢迎”文本。其他标头选项包括headerTitle ， headerStyle等。通过react-navigation依赖关系可以使用此功能。

this.props.navigation对象还具有我们可以直接在组件中直接访问的不同属性。首先， navigate用于指定要导航的屏幕。接下来， goBack()是可帮助我们导航到上一屏幕（如果有）的方法。最后， state对象可帮助我们跟踪先前状态和新状态。

使用onPress()处理程序，我们也可以像在ScreenOne.js一样直接访问屏幕。只需传递组件和屏幕名称作为参数即可。

由于以下配置，所有这些方法和对象均可用于我们的组件。为了利用这三个屏幕，并查看堆栈导航的工作原理，我们将App.js修改为：

我们将从react-navigation以及我们在源目录中创建的所有其他屏幕中导入StackNavigator 。

屏幕一

屏幕二

屏幕三

标签导航

选项卡导航的工作方式与Stack Navigator不同。 UI一次可以使用不同的屏幕，并且没有第一个或下一个屏幕。用户可以从“选项卡菜单”访问每个选项卡。要创建选项卡导航菜单，我们需要导入createBottomTabNavigator 。让我们看看它是如何工作的。这次，我们将编辑App.js代码。