作为开发人员，您希望尽一切努力使您的应用程序直观。 自然，大多数应用程序都由多个屏幕组成，因此使您的应用程序更易于使用的一种方法是实现屏幕之间的导航系统。 React Navigation 是用于简化 React Native 应用程序中屏幕之间导航的最佳库之一。 只需几个步骤，您就可以将 React Navigation 集成到您的应用程序中。

1. 设置

1.1 创建 Expo 项目并安装 React 导航库

这个项目将使用 Expo 创建，并且需要 React Navigation 库让用户能够导航到使用 expo init 创建一个名为“NavigationProject”的新 React Native 项目，如下所示：

expo init NavigationProject

然后使用以下命令安装此库：

npm install @react-navigation/native @react-navigation/native-stack

然后对于这个 Expo 项目，像这样安装这些依赖项：

expo install react-native-screens react-native-safe-area-context

1.2 创建画面

接下来，在项目的根目录中添加一个名为“HomeScreen.js”的文件。 此文件将用作此应用程序的主屏幕。 在 HomeScreen.js 中，添加一个 View 组件，其中包含一个 Text 组件，该组件将显示文本“Home”。 接下来，添加带有文本“See Questions”的 TouchableOpacity 组件。 然后，添加另一个带有“See Answers”文本的 TouchableOpacity 组件。 HomeScreen.js 中的代码现在看起来像这样：

import { StatusBar } from 'expo-status-bar';import { Text,View,TouchableOpacity } from 'react-native';export default HomeScreen = () =>{   return (               See Questions         See Answers                  );}

之后，创建一个名为“QuestionsScreen.js”的文件，其中包含五个基本问题。 该组件将包含一个 View 组件，其中包含五个问题的五个 Text 组件。 代码如下所示：

import { Text, View } from 'react-native';export default QuestionsScreen = () =>{return (               1. What is the capital of Virginia?         2. What is the capital of New York?         3. What is the capital of Alaska?         4. What is the capital of Georgia?         5. What is the capital of Michigan?         );}

现在，创建一个名为“AnswersScreen.js”的文件，该文件将用于保存 QuestionsScreen.js 中列出的五个问题的答案。 该代码与代码 QuestionsScreen 非常相似，看起来像这样：

import { StatusBar } from 'expo-status-bar';import { Text, View } from 'react-native';export default AnswersScreen = () =>{   return (               1. Richmond         2. Albany         3. Juneau         4. Atlanta         5. Detroit         );}

2. 在 Javascript 文件中实现 React Navigation

现在，您将使用之前安装的 React Navigation 依赖项。

首先，使用 App.js 中的以下代码行从 React Navigation 导入 NavigationContainer 组件和 createNativeStackNavigator 函数：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

之后，在 App.js 中创建一个名为 Stack 的全局变量，该变量将使用 createNativeStack 函数创建。 Stack 是这个项目的一个重要变量，因为它在这个应用程序中创建了一个导航堆栈，当用户在应用程序的各个部分之间切换时，它将跟踪这个应用程序中的屏幕顺序。

接下来，使用 NavigationContainer 组件来保存应用程序的屏幕。 每个屏幕都分配有名称、组件和选项属性。

App.js 现在应该如下所示：

import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { StatusBar } from 'expo-status-bar';import { StyleSheet, Text, View } from 'react-native';import HomeScreen from './HomeScreen';import QuestionsScreen from './QuestionsScreen';import AnswersScreen from './AnswersScreen';const Stack = createNativeStackNavigator();export default function App() {   return (                                                                  );}

此应用程序的第一个屏幕是“主”屏幕。 通过为 initialRoute 属性分配值“Home”，应用程序知道首先导航到该屏幕。 所有三个屏幕的名称都包括在内，并且将在从一个屏幕转到另一个屏幕时使用。

现在回到 HomeScreen.js，为两个 Button 组件添加一个 onPress 属性。 每个 onPress 属性将使用一个函数根据传递给导航参数的导航函数的名称导航到“问题”或“答案”屏幕。 HomeScreen.js 的最终代码如下所示：

import { StatusBar } from 'expo-status-bar';import { View, Text, TouchableOpacity } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';export default HomeScreen = ({ navigation }) => {return (               navigation.navigate('Questions',{})}/>         navigation.navigate('Answers',{})}/>                  );}

在您的终端中运行“expo start”并查看应用程序的运行情况！ 这是添加了一些样式的应用程序的外观：

3. 进一步测试

这个应用程序展示了 React Navigation 库的强大功能。 然而，本教程只涉及表面。 除了屏幕之间的基本导航之外，您还可以使用 React Navigation 将选项卡和导航抽屉添加到您的应用程序。 如果您想了解更多关于这个库的信息，请单击本教程下方的官方文档链接。

快乐编码！