屏幕间导航

移动应用很少只包含一个屏幕。管理多个屏幕的展示和它们之间的过渡通常由称为导航器的东西来处理。

本指南介绍了 React Native 中提供的各种导航组件。如果您是第一次接触导航，您可能希望使用 React Navigation。React Navigation 提供了一个简单的导航解决方案，能够在 Android 和 iOS 上呈现常见的堆栈导航和选项卡导航模式。

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

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

安装和设置

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

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

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

如果您有一个 Expo 托管项目，请使用 expo 安装依赖项。

npx expo install react-native-screens react-native-safe-area-context

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

注意

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

现在，您需要将整个应用包装在 NavigationContainer 中。通常您会在入口文件（例如 index.js 或 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;

现在，您可以准备在设备/模拟器上构建和运行您的应用了。

用法

现在您可以创建一个包含主页和个人资料页的应用。

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）。类似地，您可以根据需要定义任意多个屏幕。

您可以在 Stack.Screen 的 options 属性中设置每个屏幕的选项，例如屏幕标题。

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

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 入门指南。

React Navigation​

安装和设置​

用法​

React Navigation

安装和设置

用法