在屏幕之间导航

移动应用很少由单个屏幕组成。管理多个屏幕的渲染和转换通常由所谓的导航器来处理。

¥Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.

本指南涵盖了 React Native 中可用的各种导航组件。如果你刚开始使用导航，你可能会想要使用 React 导航。React Navigation 提供了一个简单的导航解决方案，能够在 Android 和 iOS 上渲染常见的堆栈导航和选项卡式导航模式。

¥This guide covers the various navigation components available in React Native. If you are getting started with navigation, you will probably want to use React Navigation. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.

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

¥If you're integrating React Native into an app that already manages navigation natively, or looking for an alternative to React Navigation, the following library provides native navigation on both platforms: react-native-navigation.

¥React Navigation

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

¥The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.

入门模板

¥Starter template

如果您正在启动一个新项目，可以使用 React Navigation 模板快速设置包含 Expo 的新项目：

¥If you're starting a new project, you can use the React Navigation template to quickly set up a new project with Expo:

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

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

¥See the project's README.md for more information on how to get started.

安装和设置

¥Installation and setup

首先，你需要将它们安装到你的项目中：

¥First, you need to install them in your project:

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

接下来，安装所需的对等依赖。你需要运行不同的命令，具体取决于你的项目是 Expo 托管项目还是裸 React Native 项目。

¥Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project.

如果你有 Expo 托管项目，请使用 expo 安装依赖：

¥If you have an Expo managed project, install the dependencies with expo:
shell
```
npx expo install react-native-screens react-native-safe-area-context
```
如果你有一个裸露的 React Native 项目，请使用 npm 安装依赖：

¥If you have a bare React Native project, install the dependencies with npm:
shell
```
npm install react-native-screens react-native-safe-area-context
```
对于带有裸 React Native 项目的 iOS，请确保已安装 CocoaPods。然后安装 pod 即可完成安装：

¥For iOS with bare React Native project, make sure you have CocoaPods installed. Then install the pods to complete the installation:
shell
```
cd ios
pod install
cd ..
```

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

¥Once you've installed and configured the dependencies, you can move on to setting up your project to use React Navigation.

使用 React Navigation 时，您可以在应用中配置 navigators。导航器处理应用中屏幕之间的转换，并提供诸如标题、标签栏等 UI。

¥When using React Navigation, you configure navigators in your app. Navigators handle the transition between screens in your app and provide UI such as header, tab bar etc.

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

¥Now you are ready to build and run your app on the device/simulator.

用法

¥Usage

现在你可以创建一个具有主屏幕和个人资料屏幕的应用：

¥Now you can create an app with a home screen and a profile screen:

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 是一个包含两个屏幕（Home 和 Profile）的导航器，它们在 createNativeStackNavigator 的 screens 属性中定义。同样，你可以根据需要定义任意数量的屏幕。

¥In this example, RootStack is a navigator with 2 screens (Home and Profile), defined in the screens property in createNativeStackNavigator. Similarly, you can define as many screens as you like.

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

¥You can specify options such as the screen title for each screen in the options property of each screen. Each screen definition also needs a screen property that is a React component or another navigator.

在每个屏幕组件中，您可以使用 useNavigation 钩子获取 navigation 对象，该对象具有多种链接到其他屏幕的方法。例如，你可以使用 navigation.navigate 转到 Profile 屏幕：

¥Inside each screen component, you can use the useNavigation hook to get the navigation object, which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:

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 原生构建的应用相同的行为和性能特征。

¥This native-stack navigator uses the native APIs: UINavigationController on iOS and Fragment on Android so that navigation built with createNativeStackNavigator will behave the same and have the similar performance characteristics as apps built natively on top of those APIs.

React Navigation 还提供了用于不同类型导航器的包，例如选项卡和抽屉。你可以使用它们在你的应用中实现各种模式。

¥React Navigation also has packages for different kind of navigators such as tabs and drawer. You can use them to implement various patterns in your app.

有关 React Navigation 的完整介绍，请关注 React 导航入门指南。

¥For a complete intro to React Navigation, follow the React Navigation Getting Started Guide.

React 导航​

入门模板​

安装和设置​

用法​

React 导航

入门模板

安装和设置

用法