屏幕之间导航
移动应用很少由单个屏幕组成。管理多个屏幕的呈现和切换通常由导航器处理。
本指南涵盖了 React Native 中可用的各种导航组件。如果您刚开始接触导航,您可能希望使用 React Navigation。React Navigation 提供了一个直接的导航解决方案,能够在 Android 和 iOS 上呈现常见的堆栈导航和选项卡式导航模式。
如果您正在将 React Native 集成到一个已经原生管理导航的应用程序中,或者正在寻找 React Navigation 的替代方案,以下库在两个平台上都提供了原生导航:react-native-navigation。
React Navigation
社区的导航解决方案是一个独立的库,允许开发者用几行代码设置应用程序的屏幕。
安装和设置
首先,您需要将它们安装到您的项目中
npm install @react-navigation/native @react-navigation/native-stack
接下来,安装所需的对等依赖。根据您的项目是 Expo 托管项目还是裸 React Native 项目,您需要运行不同的命令。
-
如果您有 Expo 托管项目,请使用
expo
安装依赖shellnpx expo install react-native-screens react-native-safe-area-context
-
如果您有裸 React Native 项目,请使用
npm
安装依赖shellnpm install react-native-screens react-native-safe-area-context
对于使用裸 React Native 项目的 iOS,请确保您已安装 CocoaPods。然后安装 pods 以完成安装
shellcd 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
prop 中为每个屏幕设置选项,例如屏幕标题。
每个屏幕都接受一个 component
prop,它是一个 React 组件。这些组件会收到一个名为 navigation
的 prop,它有各种方法可以链接到其他屏幕。例如,您可以使用 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 入门指南。