在屏幕之间导航

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。发现错误？报告问题 →

移动应用很少仅由单一屏幕组成。管理多个屏幕的呈现与过渡通常由称为导航器（navigator）的组件负责。

本指南涵盖 React Native 中可用的各种导航组件。如果你是导航功能的新手，建议使用 React Navigation。它提供了简洁的导航解决方案，能在 Android 和 iOS 上实现常见的堆栈导航和标签页导航模式。

若需将 React Native 集成到已具备原生导航管理的应用中，或寻找 React Navigation 的替代方案，以下库在双平台提供原生导航支持：react-native-navigation。

这个社区导航解决方案是独立库，开发者只需几行代码即可配置应用屏幕。

入门模板

新建项目时，可通过 Expo 使用 React Navigation 模板快速搭建：

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

详细入门指南请参阅项目的 README.md 文件。

安装与配置

首先在项目中安装核心库：

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

接着安装必要的 peer 依赖。根据项目类型选择对应命令：

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，并通过以下命令完成配置：
shell
```
cd ios
pod install
cd ..
```

完成依赖安装与配置后，即可设置项目使用 React Navigation。

使用 React Navigation 时，需在应用中配置导航器。导航器负责处理屏幕间转场，并提供页眉、标签栏等界面元素。

现在可以在设备/模拟器上构建并运行应用。

使用示例

以下创建包含主屏幕和个人资料屏幕的应用：

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 导航器通过 createNativeStackNavigator 的 screens 属性定义了两个屏幕（Home 和 Profile）。你可按需定义任意数量屏幕。

每个屏幕的 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 构建的导航行为与性能表现均与原生应用一致。

React Navigation 还提供标签页、侧边栏等导航器包，助你实现多样化导航模式。

完整入门指南请参阅 React Navigation 官方文档。

React Navigation​

入门模板​

安装与配置​

使用示例​

React Navigation

入门模板

安装与配置

使用示例