在屏幕之间导航

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

¥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.

安装和设置

¥Installation and setup

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

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

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:
```
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:
```
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:
```
cd ios
pod install
cd ..
```

注意

安装后，你可能会收到与对等依赖相关的警告。它们通常是由某些软件包中指定的版本范围不正确引起的。只要你的应用构建，你就可以安全地忽略大多数警告。

¥You might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.

现在，你需要将整个应用封装在 NavigationContainer 中。通常你会在条目文件中执行此操作，例如 index.js 或 App.js：

¥Now, you need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js:

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};

export default App;

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

¥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:

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

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

在此示例中，有使用 Stack.Screen 组件定义的 2 个屏幕（Home 和 Profile）。同样，你可以根据需要定义任意数量的屏幕。

¥In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, you can define as many screens as you like.

你可以在 Stack.Screen 的 options 属性中设置每个屏幕的屏幕标题等选项。

¥You can set options such as the screen title for each screen in the options prop of Stack.Screen.

每个屏幕都有一个 component prop，它是一个 React 组件。这些组件接收一个名为 navigation 的属性，它有多种方法可以链接到其他屏幕。例如，你可以使用 navigation.navigate 转到 Profile 屏幕：

¥Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, you can use navigation.navigate to go to the Profile screen:

const HomeScreen = ({navigation}) => {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
};
const ProfileScreen = ({navigation, 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 same 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 导航

安装和设置

用法