跳到主要内容

屏幕导航

移动应用很少由单个屏幕组成。管理多个屏幕的呈现和屏幕之间的过渡通常由所谓的导航器处理。

本指南涵盖了 React Native 中可用的各种导航组件。如果您是导航新手,您可能需要使用 React Navigation。React Navigation 提供了一个简单的导航解决方案,能够在 Android 和 iOS 上呈现常见的堆栈导航和标签导航模式。

如果您正在将 React Native 集成到已经以原生方式管理导航的应用程序中,或者正在寻找 React Navigation 的替代方案,则以下库在两个平台上都提供原生导航:react-native-navigation

React Navigation

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

安装和设置

首先,您需要在您的项目中安装它们

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

接下来,安装所需的 peer dependencies。您需要根据您的项目是 Expo managed 项目还是 bare React Native 项目来运行不同的命令。

  • 如果您有一个 Expo managed 项目,请使用 expo 安装依赖项

    shell
    npx expo install react-native-screens react-native-safe-area-context
  • 如果您有一个 bare React Native 项目,请使用 npm 安装依赖项

    shell
    npm install react-native-screens react-native-safe-area-context

    对于带有 bare React Native 项目的 iOS,请确保您已安装 CocoaPods。然后安装 pods 以完成安装

    shell
    cd ios
    pod install
    cd ..
注意

安装后您可能会收到与 peer dependencies 相关的警告。它们通常是由某些软件包中指定的不正确的版本范围引起的。您可以安全地忽略大多数警告,只要您的应用程序可以构建即可。

现在,您需要将整个应用程序包装在 NavigationContainer 中。通常您会在您的入口文件中执行此操作,例如 index.jsApp.js

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

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

export default App;

现在您已准备好在设备/模拟器上构建和运行您的应用程序。

用法

现在您可以创建一个带有主屏幕和个人资料屏幕的应用程序

tsx
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 个屏幕(HomeProfile)。同样,您可以根据需要定义任意数量的屏幕。

您可以在 Stack.Screenoptions 属性中为每个屏幕设置屏幕标题等选项。

每个屏幕都接受一个 component 属性,它是一个 React 组件。这些组件接收一个名为 navigation 的属性,该属性具有链接到其他屏幕的各种方法。例如,您可以使用 navigation.navigate 转到 Profile 屏幕

tsx
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 原生构建的应用程序相同的性能特征。

React Navigation 还具有用于不同类型导航器(例如标签和抽屉)的软件包。您可以使用它们在您的应用程序中实现各种模式。

有关 React Navigation 的完整介绍,请关注 React Navigation 入门指南