使用React Navigation V6在屏幕之间导航

此示例将帮助您学习如何使用 React Native 应用程序中的 React Navigation 在屏幕之间导航。 React Navigation 并不是 React Native 中屏幕之间路由和导航的唯一选项。如果您想探索其他选项，那么您还可以查看下面列出的库。

反应本机路由器通量：这个库基于 React Navigation，但为您提供了一些不同的 API 来与之交互。
反应本机导航：它使用 iOS 和 Android 上的底层本机 API，这是 React Navigation 的流行替代品。

我曾使用过 React Navigation 和 React-native-navigation。这两个库都很好，但是当我们谈论自定义时，react-native-navigation 为您提供的自定义选项较少，这就是我个人喜欢 React Navigation 的原因。 React Navigation 也是由 React Native 团队推荐的，并且具有非常好的性能。

在这个例子中，我们将使用 react-navigation 用于屏幕之间导航的库。 React Native Navigation 可用于以所需的方式从一个屏幕切换到另一个屏幕。该导航解决方案完全用 JavaScript 编写（因此您可以阅读和理解所有源代码），并基于强大的本机原语。

如何在屏幕之间导航

React Navigation 提供了所有不同类型的导航器，例如

堆栈导航器：用于简单的屏幕切换
抽屉导航器：创建导航抽屉/侧边栏
底部选项卡导航器：用于底部导航
顶部选项卡导航器：创建选项卡导航

我将在这个示例中展示简单的导航，因此我们将看到堆栈导航器（createNativeStackNavigator）使用 React Navigation 进行导航。对于堆栈导航，我们需要执行以下操作：

1.安装React导航库（我们将在下面看到）

2. 设置 NavigationContainer 这是应用程序的索引。您可以在此处将所有屏幕作为组件列出并为其提供名称。

<NavigationContainer>
  <Stack.Navigator initialRouteName="FirstPage">
    <Stack.Screen
      name="FirstPage"
      component={FirstPage}
      options={{
        title: 'First Page', //Set Header Title
        headerStyle: {
          backgroundColor: '#f4511e', //Set Header color
        },
        headerTintColor: '#fff', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        },
      }}
    />
    <Stack.Screen name="SecondPage" component={SecondPage}/>
    <Stack.Screen name="ThirdPage" component={ThirdPage}/>
  </Stack.Navigator>
</NavigationContainer>

如果您在上面的代码片段中看到我创建了一个 NavigationContainer 其中定义了我们的堆栈导航器。

在此堆栈导航器中，我们将每个应用程序屏幕作为 Stack.Screen。我们可以使名称与组件名称不同，因为我们将使用该名称作为该组件的引用。这是因为，如果您在任何组件中有任何更新，那么您可以更改索引中的组件，一切都会好起来的，不会有任何问题，因为我们已经使用名称（引用）切换到该组件。

如果您注意到我们还有一个选项属性，它允许您自定义标题选项，如标题、背景颜色、文本颜色、样式等。您还可以使用自定义标头代替默认标头。

还有一件事要强调的是 initialRouteName 它定义了用户打开应用程序时应用程序的登陆屏幕。

3.一旦我们设置了 NavigationContainer 我们现在可以使用我们的名称引用来切换到我们想要的任何屏幕。我们可以使用以下命令切换屏幕

navigation.navigate('SecondPage')

这意味着我们要切换到名为 SecondPage 的组件，它将导航到名为 SecondPage 的组件。

堆栈导航器

堆栈导航器用于在屏幕之间移动/导航。它被称为堆栈导航器，因为在进行导航时它管理屏幕堆栈。例如，如果我有 FirstPage、SecondPage 和 ThirdPage，并且我要从 FirstPage 移动到 SecondPage，那么它将在堆栈中保留 FirstPage，在移动到 ThirdPage 后，它将在堆栈中保留 FirstPage 和 SecondPage。一旦我们请求返回到上一个屏幕，它就会从堆栈中拉出最后插入的屏幕并将其显示在前面，因此在 ThirdPage 的情况下，我们将看到 SecondPage，从 SecondPage 我们将看到 FirstPage。

在导航的帮助下，我们可以执行不同类型的切换操作，例如

1. 导航到新屏幕

navigation.navigate('SecondPage')

导航 – 导航属性被传递到堆栈导航器中的每个屏幕组件中
navigate(‘SecondPage’) – 我们使用要将用户移动到的路线名称来调用导航函数。

如果我们使用未在堆栈导航器上定义的路由名称调用 navigation.navigate，则不会发生任何情况。

2. 多次导航至一条路线

如果您遇到在 SecondPage 上并且必须再次打开 SecondPage 的情况，那么您会看到 navigation.navigate('SecondPage') 该路线不会执行任何操作。对于正常情况来说，为什么有人想要切换到相同的屏幕也是有道理的？但对于特殊情况，他们提供了 navigation.push

navigation.push('SecondPage')

推送允许我们表达添加另一条路线的意图，而不管现有的导航历史记录如何。所以即使你在 SecondPage 你可以按 SecondPage 再次。

3. 回去

当可以从活动屏幕返回时，堆栈导航器提供的标题将自动包含一个后退按钮（如果导航堆栈中只有一个屏幕，则没有任何内容可以返回，因此有没有后退按钮）。

有时您希望能够以编程方式触发此行为，为此，您可以使用

navigation.goBack();

4. 返回堆栈中的第一个屏幕

如果您想返回多个屏幕，例如，如果您在堆栈深处有多个屏幕，并且想要关闭所有屏幕以返回堆栈的第一个屏幕，那么您可以使用

navigation.popToTop()

这将丢弃堆栈中的所有屏幕，并将您带到堆栈中的第一个屏幕。

5. 更换堆栈中的屏幕

在某些情况下，需要更改屏幕而不保留最后一个屏幕。例如，我已从 FirstPage 导航到 SecondPage，然后想要导航到 ThirdPage 但不将 SecondPage 保留在堆栈中，那么我可以使用

navigation.replace('ThirdPage')

这会将 SecondPage 替换为 ThirdPage，并且不会将 SecondPage 保留在堆栈中，这意味着当我们从 ThirdPage 返回时，我们将看到 FirstPage 而不是 SecondPage。

6. 重置导航器状态

这是有点不同的事情，因为所有上述导航功能都是为了管理不同类型的导航，但此功能将帮助您在运行时重置导航状态。例如，如果您想根据不同的权限将用户登陆到不同的屏幕上，那么您可以使用它来重置导航器。

navigation.reset({
    index: 0,
    routes: ({ name: 'ThirdPage' }),
})

在这里，我将 ThirdPage 重置为堆栈的初始页面。

项目概况

在此示例中，我尝试涵盖 Stack Navigator 中可能的大多数不同类型的导航。如果我们谈论该项目，那么最终的示例将具有三个屏幕，这将帮助我们理解上述导航。

让我们开始创建应用程序、安装依赖项和理解代码。

制作 React Native 应用程序

React Native 入门将帮助您更多地了解如何制作 React Native 项目。我们将使用 React Native 命令行界面来制作我们的 React Native 应用程序。

如果您之前安装了全局的react-native-cli软件包，请将其删除，因为它可能会导致意外问题：

npm uninstall -g react-native-cli @react-native-community/cli

运行以下命令创建一个新的 React Native 项目

npx react-native init ProjectName

如果你想使用特定的 React Native 版本启动一个新项目，你可以使用 –version 参数：

npx react-native init ProjectName --version X.XX.X

注意如果上述命令失败，您可能使用的是旧版本 react-native 或者 react-native-cli 在您的电脑上全局安装。尝试卸载 cli 并使用 npx 运行 cli。

这将在项目目录中创建一个带有名为 App.js 的索引文件的项目结构。

安装依赖项

要使用 React Navigation 在屏幕之间导航，我们需要添加 react-navigation 和其他支持依赖项。

要安装依赖项，请打开终端并跳入您的项目

cd ProjectName

1. 安装 react-navigation

npm install @react-navigation/native --save

2.其他支持库 react-native-screens 和 react-native-safe-area-context

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

react-native-screens 软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。编辑 MainActivity.java 文件位于 android/app/src/main/java/<your package name>/MainActivity.java。

将以下代码添加到正文中 MainActivity 班级：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

并确保在此文件顶部的包声明下方添加以下导入声明：

import android.os.Bundle;

需要进行此更改，以避免与 View 状态在 Activity 重新启动期间未一致持久相关的崩溃。

3. 对于 Stack Navigator 安装

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

注意：当您使用导航器（例如堆栈导航器）时，您需要按照该导航器的安装说明来获取任何其他依赖项。如果您收到错误“无法解析模块”，则需要在项目中安装该模块。

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

CocoaPods 安装

请使用以下命令安装CocoaPods

npx pod-install

目录结构示例

要开始此示例，您需要创建一个名为的目录页面在您的项目及其下的三个文件的名称 FirstPage.js, SecondPage.js，和 ThirdPage.js

堆栈导航结构

使用 React Navigation 在屏幕之间导航的代码

现在在任何代码编辑器中打开 App.js 并将代码替换为以下代码。

应用程序.js

// Navigate Between Screens using React Navigation in React Native //
// https://aboutreact.com/react-native-stack-navigation //

import * as React from 'react';
import { Button, View, Text } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="FirstPage">
        <Stack.Screen
          name="FirstPage"
          component={FirstPage}
          options={{
            title: 'First Page', //Set Header Title
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
        <Stack.Screen
          name="SecondPage"
          component={SecondPage}
          options={{
            title: 'Second Page', //Set Header Title
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
        <Stack.Screen
          name="ThirdPage"
          component={ThirdPage}
          options={{
            title: 'Third Page', //Set Header Title
            headerStyle: {
              backgroundColor: '#f4511e', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

页面/FirstPage.js

在任何代码编辑器中打开 FirstPage.js 并将代码替换为以下代码。

// Navigate Between Screens using React Navigation in React Native //
// https://aboutreact.com/react-native-stack-navigation //
import * as React from 'react';
import { Button, View, Text, SafeAreaView } from 'react-native';

const FirstPage = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 , padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16
            }}>
            This is the First Page of the app
          </Text>
          <Button
            onPress={() => navigation.navigate('SecondPage')}
            title="Go to Second Page"
          />
        </View>
        <Text style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          Navigate Between Screens using
          {'\n'}
          React Navigation
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
}

export default FirstPage;

页面/SecondPage.js

在任何代码编辑器中打开 SecondPage.js 并将代码替换为以下代码。

// Navigate Between Screens using React Navigation in React Native //
// https://aboutreact.com/react-native-stack-navigation //
import * as React from 'react';
import { Button, View, Text, SafeAreaView } from 'react-native';

const SecondPage = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 16 }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16
            }}>
            This is Second Page of the App
          </Text>
          <Button
            title="Go back"
            onPress={() => navigation.goBack()}
          />
          <Button
            title="Go to SecondPage... again"
            onPress={() => navigation.push('SecondPage')}
          />
          <Button
            title="Replace this screen with Third Page"
            onPress={() =>
              navigation.replace('ThirdPage', {
                someParam: 'Param',
              })
            }
          />
          <Button
            title="Reset navigator state to Third Page"
            onPress={() =>
              navigation.reset({
                index: 0,
                routes: (
                  {
                    name: 'ThirdPage',
                    params: { someParam: 'reset' },
                  },
                ),
              })
            }
          />
          <Button
            title="Go to First Page"
            onPress={() => navigation.navigate('FirstPage')}
          />
          <Button
            title="Go to Third Page"
            onPress={() =>
              navigation.navigate(
                'ThirdPage', { someParam: 'Param1' }
              )
            }
          />
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          Navigate Between Screens using
          {'\n'}
          React Navigation
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
}

export default SecondPage;

页面/ThirdPage.js

在任何代码编辑器中打开 ThirdPage.js 并将代码替换为以下代码。

// Navigate Between Screens using React Navigation in React Native //
// https://aboutreact.com/react-native-stack-navigation //
import * as React from 'react';
import { Button, View, Text, SafeAreaView } from 'react-native';

const ThirdPage = ({ route, navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 16 }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16
            }}>
            This is Third Page of the App
            {'\n'}
            {route.params.someParam}
          </Text>
          { route.params.someParam != 'reset' ?
            <Button
              title="Go back"
              onPress={() => navigation.goBack()}
            />
            :null
          }
          <Button
            onPress={() => navigation.navigate('SecondPage')}
            title="Go to Second Page"
          />
          <Button
            title="Reset navigator to First Page"
            onPress={() =>
              navigation.reset({
                index: 0,
                routes: (
                  {
                    name: 'FirstPage',
                    params: { someParam: 'reset' },
                  },
                ),
              })
            }
          />
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          Navigate Between Screens using{'\n'}React Navigation
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
}

export default ThirdPage;

运行 React Native 应用程序

再次打开终端并使用跳转到您的项目。

cd ProjectName

1. 启动 Metro Bundler

首先，您需要启动 Metro，React Native 附带的 JavaScript 捆绑器。要启动 Metro 捆绑程序，请运行以下命令

npx react-native start

一旦您启动 Metro Bundler，它将永远在您的终端上运行，直到您将其关闭。让 Metro Bundler 在自己的终端中运行。打开一个新终端并运行该应用程序。

2.启动React Native应用程序

在 Android 虚拟设备或真实调试设备上运行项目

npx react-native run-android

或在 iOS 模拟器上运行（仅限 macOS）

npx react-native run-ios

输出截图

StackNavigation示例1 StackNavigation示例2 StackNavigation示例3 StackNavigation示例4 StackNavigation示例5

在线模拟器中的输出

这就是您如何使用 React Native 中的 React Navigation 在屏幕之间进行导航。如果您有任何疑问或想分享有关该主题的内容，您可以在下面发表评论或在此处联系我们。很快就会有更多帖子发布。

使用React Navigation V6在屏幕之间导航