React Navigation 安装

React Navigation 是一个针对 React Native 应用程序开发的流行路由库。它具有易于使用、可定制和可扩展的特点。

安装 React Navigation 需要执行以下步骤：

步骤 1：安装依赖项

在你的 React Native 项目目录下，打开终端或命令提示符窗口，并执行如下命令：

npm install @react-navigation/native

该命令将安装 React Navigation 的核心库。

步骤 2：选择导航器

React Navigation 提供了不同的导航器，可以满足不同场景的需求。你需要选择适合你项目的导航器。

下面列出了 React Navigation 支持的导航器：

• stack navigator：用于处理深度链接、模态框和标题层次结构。
• tab navigator：用于在不同屏幕之间快速切换。
• drawer navigator：提供了一个侧滑菜单，用于导航到不同的页面。
• material bottom tab navigator：提供了一个支持 Material Design 的底部导航栏。
• material top tab navigator：提供了一个支持 Material Design 的顶部标签导航栏。

可以通过如下命令安装导航器：

npm install @react-navigation/<navigator-name>

例如，要安装 stack navigator，可以执行如下命令：

npm install @react-navigation/stack

步骤 3：导入导航器

在你的项目中，导入你所选的导航器。例如，使用 stack navigator，可以执行如下代码：

import { createStackNavigator } from '@react-navigation/stack';

该代码将导入 createStackNavigator 函数，你可以使用它来创建栈式导航器。

步骤 4：创建导航器

使用 createStackNavigator 函数创建栈式导航器。例如：

const Stack = createStackNavigator();

步骤 5：使用导航器

在你的应用程序中，使用 Stack.Navigator 和 Stack.Screen 组件来创建导航器。例如：

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在这个例子中，我们创建了一个栈式导航器，并添加了两个屏幕：HomeScreen 和 DetailsScreen。

现在，你可以使用 navigation.push() 方法在不同的屏幕之间进行导航。

至此，React Navigation 安装完成。

请注意，在使用 React Navigation 时，你需要安装每个导航器的依赖项。例如，在使用 stack navigator 时，你需要安装 react-native-gesture-handler 和 react-native-reanimated 。具体的安装方法请参考 React Navigation 的文档。

参考资料

• React Navigation 文档