React Native 导航

React Native 导航 用于管理多个屏幕之间的展示和过渡。移动应用程序中内置了两种类型的导航。它们是栈导航和标签式导航模式。

React Navigation 安装

React Navigation 是由 React Native 社区生成的，它提供了用 JavaScript 编写的导航解决方案。

创建 React Native 项目并安装所需的包和依赖项。

使用以下任一命令在 React Native 项目中安装 react-navigation 包。

成功执行上述命令后，它会在 package.json 文件中添加 "react-navigation": "^3.3.0" (3.3.0 是版本)。

之后，安装 react-native-gesture-handler 包。

现在，使用命令将所有本机依赖项链接在一起

要完成 Android 版 'react-native-gesture-handler' 的安装，请在 MainActivity.java 中进行以下修改。

projectDirectory/android/app/src/main/java/com/project/MainActivity.java

创建堆栈导航器

要创建堆栈导航，我们导入 react-navigation 库的 createStackNavigator 和 createAppContainer 函数。

App.js

createStackNavigator 是一个函数，它接受路由配置对象和选项对象。它返回 React 组件。

MainActivity.java

当我们运行上面的代码时，我们看到一个包含 HomeScreen 组件的空导航栏。

输出

简写路由配置

当我们只有一个屏幕作为路由，即 Home 屏幕组件时，我们不需要使用 {screen: HomeScreen}，我们可以直接使用 home 组件。

添加标题和样式导航

添加第二个路由屏幕

在 App.js 文件中创建另一个类 (ProfileScreen)，将第二个路由屏幕添加到堆栈导航器。

initialRouteName 选项对象指定堆栈导航中的初始路由。

完整代码

App.js

输出

在下一节中，我们将学习如何从 Home 路由转到 Profile 路由（从一个屏幕到另一个屏幕）。