如何在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
代码。
当然,您可以通过将“主页”和“设置”屏幕划分为不同的组件来对其进行一些模块化。 对于我们的演示应用程序,以上示例已达到目的。 您可以添加tabBarOptions
来修改其外观。
结论
掌握它们并在您的应用程序中使用它们可能需要一些时间,但是一旦您掌握了整个基本概念,就可以用它创造奇迹。 您甚至可以将Stack和Tab导航器集成到复杂的场景中。 react-navigation
具有良好的文档。
完整的代码可以在Github Repo上获得
⚛️+????react-navigation示例。 通过在GitHub上创建一个帐户,为amandeepmittal / rnNavApp开发做出贡献。 github.com
我叫阿曼·米塔尔(Aman Mittal)。 我是一名开发人员,负责开发Node.js相关应用程序和❤️React Native。 这是我的 网站 , @amanhimself 在Twitter上。
Redux是React Native生态系统的重要组成部分。 如果您的世界围绕着JavaScript旋转,那么您可能已经... medium.freecodecamp.org
最初,此文章最初在Zeolearn.com上发布。
From: https://hackernoon.com/navigation-in-a-react-native-app-cf61ed85e80b