屏幕之间导航

移动应用很少只由一个屏幕组成。管理多个屏幕的显示和切换通常由所谓的导航器处理。

本指南涵盖了 React Native 中可用的各种导航组件。如果你刚开始接触导航，你可能希望使用React Navigation。React Navigation 提供了一个直接的导航解决方案，能够在 Android 和 iOS 上呈现常见的堆栈导航和标签页导航模式。

如果你正在将 React Native 集成到一个已经原生管理导航的应用中，或者正在寻找 React Navigation 的替代方案，以下库在两个平台上都提供了原生导航：react-native-navigation。

社区导航解决方案是一个独立的库，允许开发人员用几行代码设置应用程序的屏幕。

启动模板

如果你正在启动一个新项目，你可以使用 React Navigation 模板，通过 Expo 快速设置一个新项目。

shell
npx create-expo-app@latest --template react-navigation/template

有关如何开始的更多信息，请参阅项目的 README.md。

安装和设置

首先，你需要在你的项目中安装它们。

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

接下来，安装所需的对等依赖项。你需要根据你的项目是 Expo 管理项目还是裸露的 React Native 项目来运行不同的命令。

如果你有一个 Expo 管理项目，请使用 expo 安装依赖项。
shell
```
npx expo install react-native-screens react-native-safe-area-context
```
如果你有一个裸露的 React Native 项目，请使用 npm 安装依赖项。
shell
```
npm install react-native-screens react-native-safe-area-context
```
对于裸露的 React Native 项目的 iOS，请确保你已安装 CocoaPods。然后安装 pods 以完成安装。
shell
```
cd ios
pod install
cd ..
```

安装并配置好依赖项后，你就可以继续设置你的项目以使用 React Navigation。

使用 React Navigation 时，你在应用程序中配置导航器。导航器处理应用程序中屏幕之间的切换，并提供 UI，例如标题、标签栏等。

现在你已经准备好在设备/模拟器上构建并运行你的应用程序了。

用法

现在你可以创建一个包含主屏幕和个人资料屏幕的应用程序。

tsx
import * as React from 'react';
import {createStaticNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {title: 'Welcome'},
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

在这个例子中，RootStack 是一个包含 2 个屏幕（Home 和 Profile）的导航器，在 createNativeStackNavigator 的 screens 属性中定义。同样，你可以定义任意数量的屏幕。

你可以在每个屏幕的 options 属性中为每个屏幕指定选项，例如屏幕标题。每个屏幕定义还需要一个 screen 属性，它是一个 React 组件或另一个导航器。

在每个屏幕组件内部，你可以使用 useNavigation 钩子来获取 navigation 对象，它有各种方法可以链接到其他屏幕。例如，你可以使用 navigation.navigate 跳转到 Profile 屏幕。

tsx
import {useNavigation} from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
}

function ProfileScreen({route}) {
  return <Text>This is {route.params.name}'s profile</Text>;
}

这个 native-stack 导航器使用原生 API：iOS 上的 UINavigationController 和 Android 上的 Fragment，因此用 createNativeStackNavigator 构建的导航将具有与原生构建在这些 API 之上的应用程序相同的行为和相似的性能特征。

React Navigation 还有用于不同类型导航器（例如标签页和抽屉）的包。你可以使用它们在应用程序中实现各种模式。

有关 React Navigation 的完整介绍，请按照React Navigation 入门指南。

React Navigation​

启动模板​

安装和设置​

用法​

React Navigation

启动模板

安装和设置

用法