React Native 导航：带有示例的教程

本 React Native Navigation 教程的最后更新时间为 2022 年 12 月 1 日，其中包含有关最新版本 React Navigation（撰写本文时为 v6）的信息，以及将 React Navigation 与 React Router 库进行比较的部分。查看 React Navigation 与 React Native Navigation：哪个适合您？了解更多信息。

移动应用程序由多个屏幕组成。构建移动应用程序时，主要关注的是如何处理用户在应用程序中的导航，例如屏幕的呈现以及屏幕之间的转换。

React Navigation 是 React 最知名的导航库之一。在本教程中，我们将介绍 React Native 导航的基础知识，向您展示如何开始在 React Native 应用程序中使用 React Navigation，并演练一些 React Native 导航示例。

什么是反应导航？

React Navigation 是一个独立的库，修复 Windows 11 黑屏问题的 8 种方法使您能够在 React Native 应用程序中实现导航功能。

React Navigation 使用 JavaScript 编写，不直接使用 iOS 和 Android 上的本机导航 API。相反，它重新创建了这些 API 的某些子集。这样可以集成第三方 JS 插件，最大限度地定制，并且更容易调试，无需学习 Objective-C、Swift、Java、Kotlin 等。

反应导航 6.0

截至撰写本文时，React Navigation 最稳定的版本是 2021 年 8 月发布的 React Navigation 6.0。根据他们的发布帖子，最新版本专注于灵活性和易用性。不过，该团队还表示，这次最新版本带来的重大变化很少。

React Navigation 6.0 中包含的一些新功能包括：

导航器的灵活自定义选项：这意味着开发人员现在可以进一步调整导航器的外观和感觉
Group组成部分： Group元素允许用户在项目中的各个屏幕之间共享屏幕选项和配置。因此，这允许更多的组织和代码可读性
组件库：从 v6 开始，Navigation 团队创建了一个 elements组件库。这对于用户想要构建自定义导航器的情况很有用
原生导航：默认情况下，库现在使用 native-stack在引擎盖下。这意味着在旧设备上，大屏幕之间的导航速度更快且要求更低
Flipper 插件：该工具允许开发人员调试他们的应用程序并跟踪性能。如何从文件资源管理器中删除/禁用最近使用的文件在最新版本中，现在有一个官方的 React Navigation 插件，可以使测试过程变得更容易

什么是 React Native 导航？

React Native Navigation 是 React Navigation 的流行替代品。它是一个依赖于 React Native 并设计用于与 React Native 一起使用的模块。 React Native Navigation 略有不同，它直接使用 iOS 和 Android 上的本机导航 API，从而提供更本机的外观和感觉。

要更详细地探索 React Navigation 和 React Native Navigation 之间的差异，请查看“ React Navigation vs. React Native Navigation：哪个适合您？ ”

另一种选择：React Router Native

React Router Native 是在 React Native 应用程序中实现导航功能的另一种解决方案。它由 Remix 团队开发，该团队以其现代 Web 框架而闻名。

共享其大部分 API 代码 React Router Native 与React Router 框架。这意味着使用过 React Router 的 Web 开发人员会发现很容易开始使用它的 Native 版本。

在易用性方面，React Navigation 和 React Router Native 是相同的。例如，查看以下 Router Native 代码：

import { NativeRouter, Route, Link } from "react-router-native";
const Home = () => <Text>Home</Text>;
const About = () => <Text>About</Text>;
const App = () => (
  <NativeRouter>
    <View>
      <View>
        {/* Define our links. They are like anchor tags */}
        <Link to="/">
          <Text>Home</Text>
        </Link>
        <Link to="/about">
          <Text>About</Text>
        </Link>
      </View>
      {/*Define our routes for this project*/}
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </View>
    {/*The NativeRouter*/}
  </NativeRouter>
);

与Navigation相比，我们可以看到代码是相似的：

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}
function AboutScreen() {
  return (
    <View>
      <Text>About Screen</Text>
    </View>
  );
}
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
     <Stack.Navigator>
        {/*Define our routes*/}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

两个库中用于实现路由的代码彼此相同。这是一个主要的优点，因为这意味着这两个框架都有一个较小的学习曲线。

如果您有 Web 开发背景，我会推荐 React Router Native，因为它的用法与 React Router 相同。否则，React Navigation 应该是正确的选择，趣知笔记 - 分享有价值的教程！因为它拥有更大的社区，可以提供更多的开发支持。

安装 React 导航

假设您安装了Yarn ，第一步是设置 React Native 应用程序。开始使用 React Native 的最简单方法是使用 Expo 工具，因为它们允许您在不安装和配置 Xcode 或 Android Studio 的情况下启动项目。

首先，使用以下 bash 命令初始化一个空白的 Expo 应用程序：

npx create-expo-app ReactNavigationDemo

这将启动下载过程并配置项目：

接下来，cd 进入项目文件夹并打开代码编辑器：

cd ReactNavigationDemo

如果您使用的是 VS Code，则可以使用以下命令在编辑器中打开当前文件夹：

code .

使用以下命令启动应用程序：

npx expo start

下一步是安装 react-navigation项目中的库 React Native ：

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

React Native 堆栈导航器

React Navigation 使用 JavaScript 构建，可让您创建外观和感觉都像真正原生组件和导航模式。

React Navigation 使用所谓的堆栈导航器来根据用户在应用程序内所采取的路线来管理导航历史记录和相应屏幕的呈现。在给定时间仅向用户呈现一个屏幕。

想象一叠纸；导航到新屏幕会将其置于堆栈顶部，向后导航会将其从堆栈中删除。堆栈导航器还提供类似于本机 iOS 和 Android 的转换和手势。请注意，一个应用程序可以有多个堆栈导航器。

React Native 导航示例

在本节中，我们将探讨 React Native 导航模式的一些示例以及如何使用 React Navigation 库来实现它们。

1. 使用堆栈导航器在屏幕组件之间导航

让我们首先创建一个 /components文件夹位于我们项目的根目录中。然后我们创建两个文件， Homescreen.js和 Aboutscreen:

// Homescreen.js
import React from "react";
import { Button, View, Text } from "react-native";

export default function HomeScreen({ navigation }) {
  return (
    <View style={
  
  { flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to About"
        onPress={() => navigation.navigate("About")}
      />
    </View>
  );
}

请注意 onPress上面按钮的 prop - 我们稍后会解释它的作用。

// Aboutscreen.js
import React, { Component } from "react";
import { Button, View, Text } from "react-native";
export default function AboutScreen() {
  return (
    <View style={
  
  { flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>About Screen</Text>
    </View>
  );
}

您的项目文件夹应如下所示：

让我们也做一些改变 App.js。在这里，我们必须进行以下导入：

//tell React that we will implement a navigator
import { NavigationContainer } from "@react-navigation/native";
//create a stack navigator
import { createNativeStackNavigator } from "@react-navigation/native-stack";

在根目录中实现我们的导航很有用 App.js文件，因为组件导出自 App.js是 React Native 应用程序的入口点（或根组件），所有其他组件都是后代。

正如您将看到的，我们将把所有其他组件封装在导航函数中：

// App.js
import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./components/HomeScreen";
import AboutScreen from "./components/AboutScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在上面的代码中， createNativeStackNavigator为我们的应用程序提供了一种在屏幕之间转换的方法，其中每个新屏幕都放置在堆栈的顶部。它配置为具有熟悉的 iOS 和 Android 外观和感觉：新屏幕在 iOS 上从右侧滑入，在 Android 上从底部淡入。

在这里，我们已经执行了 createNativeStackNavigator函数并将其实例存储到 Stack多变的。

稍后，我们将使用以下方式传递我们的路线 Stack.Screen标签。这 Home路线对应于 HomeScreen，以及 About路线对应于 AboutScreen.

这 createStackNavigator函数在幕后传递， navigate支撑到 HomeScreen和 AboutScreen成分。该属性允许导航到指定的屏幕组件。这就是为什么我们能够在按钮上使用它 HomeScreen.js，当按下时，会导致 AboutScreen页面，如下图：

<Button title="Go to About" onPress={() => navigation.navigate("About")} />;

在里面 App.js代码中，我们最终通过将组件包装在其中创建了一个应用程序容器 NavigationContainer标签。该容器管理导航状态。

要运行该应用程序，您需要下载 Expo 客户端应用程序。您可以获得 iOS 和 Android 版本。确保您的命令行指向项目文件夹并运行以下命令：

npx expo start

您应该会看到终端上显示一个二维码。 Android 上使用 Expo 应用程序扫描二维码，对于 iOS 应用程序，您可以使用普通 iPhone 摄像头进行扫描，这会提示您单击打开 Expo 应用程序的命令：

2. 使用选项卡导航

大多数移动应用程序都有多个屏幕。此类移动应用程序中常见的导航方式是基于选项卡的导航。这里我们重点介绍一下如何使用 createBottomTabNavigator功能。

在实现基于选项卡的导航之前，我们必须首先安装 bottom-tabs像这样的模块：

npm install @react-navigation/bottom-tabs

让我们通过创建一个在我们的应用程序中添加另一个屏幕 ContactScreen.js文件下 /components:

import React, { Component } from "react";
import { Button, View, Text } from "react-native";

export default function ContactScreen() {
  return (
    <View style={
  
  { flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Contact Screen</Text>
    </View>
  );
}

现在让我们添加到顶部的导入 App.js文件：

import ContactScreen from './components/ContactScreen';

回想一下，在根目录中实现导航很有用 App.js成分。因此，我们将通过导入来实现我们的选项卡导航 createBottomTabNavigator在 App.js。我们来替换一下 createStackNavigator用这行代码：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

另外，运行 createBottomTabNavigator功能：

const Tab = createBottomTabNavigator();

//further code...
<NavigationContainer>
  <Tab.Navigator initialRouteName="Home">
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="About" component={AboutScreen} />
  </Tab.Navigator>
</NavigationContainer>;

使用以下命令添加新屏幕 Tab.Screen零件：

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="About" component={AboutScreen} />
  <Tab.Screen name="Contact" component={ContactScreen} />
</Tab.Navigator>

如果您运行该应用程序 npm start并在您的 Expo 客户端上打开它，您应该看到底部导航已实现：

3.使用抽屉式导航

要立即开始实施抽屉导航，请首先安装所需的依赖项：

npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

接下来，前往 Reanimated 文档，在您的项目中设置手势控制。

完成此步骤后，将这些导入语句写入 App.js:

import "react-native-gesture-handler"; //this should be the first import in your code
import { createDrawerNavigator } from "@react-navigation/drawer";

我们也来更新一下 AppNavigator多变的：

const Drawer = createDrawerNavigator();
<Drawer.Navigator initialRouteName="Home">
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="About" component={AboutScreen} />
  <Stack.Screen name="Contact" component={ContactScreen} />
</Drawer.Navigator>

如果你 npm start，您应该能够立即看到更改。从左侧滑动即可查看抽屉式导航：

您可以通过在路线名称旁边添加图标来自定义抽屉导航。在该项目的assets文件夹中，目前有三个图标：

我们可以通过添加来定制 navigationOptions到以下屏幕组件文件：

<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen
      name="Home"
      component={HomeScreen}
      options={
  
  { //change the configuration of our screen
        drawerIcon: ({ color, number, focused }) => { //set the icon:
          return ( //the icon will be an image
            <Image
              source={require("../assets/home-icon.png")}
              style={
  
  { height: 30, width: 30 }}
            />
          );
        },
      }}
    />
    <Drawer.Screen
      name="About"
      component={AboutScreen}
      options={
  
  {
        drawerIcon: ({ color, number, focused }) => { //set the icon for all screens
          return (
            <Image
              source={require("../assets/about-icon.png")}
              style={
  
  { height: 30, width: 30 }}
            />
          );
        },
      }}
    />
    <Drawer.Screen
      name="Contact"
      component={ContactScreen}
      options={
  
  {
        drawerIcon: ({ color, number, focused }) => {
          return (
            <Image
              source={require("../assets/contact-icon.png")}
              style={
  
  { height: 30, width: 30 }}
            />
          );
        },
      }}
    />
  </Drawer.Navigator>
</NavigationContainer>

这 drawerActiveTintColorprop 允许您根据导航选项卡和标签的活动或非活动状态应用任何颜色。例如，我们可以更改导航抽屉标签的活动状态颜色。前往 Drawer.Navigator变量并添加到选项对象：

<Drawer.Navigator
  initialRouteName="Home"
  screenOptions={
  
  { drawerActiveTintColor: "#e91e63" }}
>
//... further code.

这会导致颜色变化：

在 React Navigation 中将参数传递到屏幕

将参数传递给路由有两个简单的步骤：

通过将参数放入对象中作为第二个参数来将参数传递给路由
```
navigation.navigate
```
功能：
```
navigation.navigate('RouteName', { /* params go here */ })
```

读取屏幕组件中的参数：

export default function HomeScreen({ route, navigation }) {

//the 'route' variable gives us information on the page.

//It also stores the parameters and their values

const { paramName } = route; //our parameter 'paramName' is stored here.

//..further code..

}

最后，要设置标题标题，我们可以使用 title的财产 options像这样的道具：

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={
  
  {
    title: "Home Page", //set the title of the page to 'Home page'
  }}
/>

结论

我希望本文能够帮助您在现有或未来的 React Native 项目中快速使用 React Navigation 包。

还有很多事情可以做，React Navigation 将满足您的大部分需求。要了解更多信息，请查看 React Navigation 文档，并随时从我的 GitHub 存储库中获取最终代码。