使用 React Navigation 5 将 React Native 中的 Stack、Tab 和 Drawer 导航结合起来

2025-05-28

使用 React Navigation 5 将 React Native 中的 Stack、Tab 和 Drawer 导航结合起来

在本文中，我们将介绍不同类型的导航以及如何使用 react-navigation 5 在 react-native 中将它们组合在一起。

目录

先决条件

为了能够跟进本文，您必须在本地环境中进行以下设置

项目设置

要设置 react-native 项目，您可以使用 React Native CLI 或 Expo CLI。

我将使用 Expo CLI 来设置一个 React-native 项目。为此，请在终端上运行以下命令。



npm install -g expo-cli
Enter fullscreen mode Exit fullscreen mode

上述命令将在您的机器上安装 Expo CLI。

注意：您需要在机器上安装Node v12才能使用命令行安装 Expo CLI。

上述命令成功运行后，运行以下命令生成/创建一个 react-native 项目。



expo init project-name
Enter fullscreen mode Exit fullscreen mode

上述命令成功运行后，在所需的代码编辑器中打开项目，并npm start在终端上运行以启动应用程序。

要使用 React-Native CLI 设置 react-native 项目，请查看此处。

React Navigation 依赖项和设置

以下依赖项是导航器用于创建导航结构以及我们的 Stack、Tab 和 Drawer 导航的核心实用程序。

在您的项目目录中，在终端上运行以下命令



npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer
Enter fullscreen mode Exit fullscreen mode

以下依赖项是手势、动画和过渡所依赖的依赖项。另外，请在终端上运行以下命令来安装这些依赖项。



npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Enter fullscreen mode Exit fullscreen mode

在我们的应用程序的根文件中（在本例中为App.js文件），我们将在那里设置我们的 react-navigation。



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

 const App = () => {
  return <NavigationContainer>{/* Navigation here */}</NavigationContainer>;
}
export default App;
Enter fullscreen mode Exit fullscreen mode

屏幕设置

下一步是设置应用程序中使用的屏幕。

为了本次演示，我将设置 3 个屏幕，请随意复制它们。

所以我把它们放在 screens 目录中。在项目根目录中创建一个screens目录，并添加以下组件

主屏幕



// ./screens/Home.js

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

const Home = () => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button title="Go to About Screen" />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;
Enter fullscreen mode Exit fullscreen mode

关于屏幕



// ./screens/About.js

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

const About = () => {
  return (
    <View style={styles.center}>
      <Text>This is the about screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default About;
Enter fullscreen mode Exit fullscreen mode

接触屏幕



// ./screens/Contact.js

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

const Contact = () => {
  return (
    <View style={styles.center}>
      <Text>This is the contact screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Contact;
Enter fullscreen mode Exit fullscreen mode

堆栈导航

堆栈导航为 React Native 应用程序提供了一种通过使用堆栈在屏幕之间转换的方法，这意味着屏幕相互堆叠。

例如，如果您从登录屏幕导航到注册屏幕，则注册屏幕将堆叠在登录屏幕的顶部，如果您返回，则注册屏幕将从堆栈中弹出。

为了设置堆栈导航，我需要在项目根目录下创建一个导航目录。在新建的目录中，我还需要在里面创建一个StackNavigator.js文件，并添加堆栈导航的设置。

注意：您可以根据需要命名文件夹和文件



// ./navigation/StackNavigator.js

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

import Home from "../screens/Home";
import About from "../screens/About";

const Stack = createStackNavigator();

const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator };
Enter fullscreen mode Exit fullscreen mode

您还可以通过添加screenOptions属性样式来自定义和设置堆栈导航的样式，请参阅下面的基本示例



// ./navigation/StackNavigator.js

const MainStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#9AC4F8",
        },
        headerTintColor: "white",
        headerBackTitle: "Back",
      }}
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}
Enter fullscreen mode Exit fullscreen mode

回到App.js文件，我们可以导入并添加新创建的 Stack Navigator。因此，我们的App.js文件应该如下所示：



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import { MainStackNavigator } from "./navigation/StackNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <MainStackNavigator />
    </NavigationContainer>
  );
}
export default App
Enter fullscreen mode Exit fullscreen mode

现在，如果我们在模拟器上运行代码，我们应该可以在 Stack 屏幕上看到主屏幕渲染。

堆叠屏幕

记住，在我们的./screens/Home.js文件中，我们有一个什么都不做的按钮，但是由于我们已经设置了堆栈导航，我们现在可以访问堆栈导航注入的导航属性，这可以帮助我们执行许多操作，其中之一就是重定向。

因此导航到./screens/Home.js并添加以下代码。



// ./screens/Home.js

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

const Home = ({ navigation }) => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button
        title="Go to About Screen"
        onPress={() => navigation.navigate("About")} // We added an onPress event which would navigate to the About screen
      />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，我们得到了导航道具，它是一个具有导航功能的对象，然后我们调用它并传入按下按钮后我们想要导航到的屏幕的名称。

堆栈导航

现在我们已经有了它，我们可以使用堆栈导航在屏幕之间导航。

标签导航

标签导航是一种位于屏幕底部或顶部的标签式导航，可用于在不同的屏幕之间切换。

Tab 导航可以将屏幕作为组件，也可以将 Stack 作为组件。

在StackNavigator.js文件中，我们为联系人屏幕创建另一个堆栈。因此，我们的StackNavigator.js如下所示



// ./navigation/StackNavigator.js

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

import Home from "../screens/Home";
import About from "../screens/About";
import Contact from "../screens/Contact";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Contact" component={Contact} />
    </Stack.Navigator>
  );
}

export { MainStackNavigator, ContactStackNavigator };
Enter fullscreen mode Exit fullscreen mode

然后，我们可以在导航目录中创建另一个文件TabNavigator.js ，并添加TabNavigator的标记



// ./navigation/TabNavigator.js

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

import { MainStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={MainStackNavigator} />
      <Tab.Screen name="Contact" component={ContactStackNavigator} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;
Enter fullscreen mode Exit fullscreen mode

然后回到我们的App.js文件，我们现在可以导入新创建的TabNavigator并在那里使用它。



//  ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import BottomTabNavigator from "./navigation/TabNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}
export default App
Enter fullscreen mode Exit fullscreen mode

标签导航

抽屉导航

抽屉导航是一个滑出式和滑入式的抽屉，其中包含指向各个屏幕的链接。当用户点击菜单图标或从应用的左侧或右侧边缘滑动手指时，抽屉导航就会打开。

为了创建抽屉导航，我们需要在导航目录中创建另一个名为DrawerNavigator.js的文件

在该文件中，我们将添加抽屉导航器标记



// ./navigation/DrawerNavigator.js

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { ContactStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Contact" component={ContactStackNavigator} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;
Enter fullscreen mode Exit fullscreen mode

然后回到我们的App.js文件，我们现在可以导入新创建的DrawerNavigtor.js文件并将其用作导航器。



// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import DrawerNavigator from "./navigation/DrawerNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

抽屉导航

您还可以添加配置选项和标题图标，以自定义抽屉导航。点击此处了解更多信息。

结论

在本文中，我们了解了如何使用 react-navigation 5 为我们的 react-native 应用设置和组合 Stack、Tab 和 Drawer 导航。

演示本文所使用的源代码可以在这里找到。

如果您对本文有任何疑问或反馈，请随时发表评论。

谢谢阅读。

文章来源：https://dev.to/easybuoy/combining-stack-tab-drawer-navigations-in-react-native-with-react-navigation-5-da
Devto 翻译
PREV
脱颖而出的初级工程师：放慢工作速度，加快成长
NEXT
为什么你应该使用 Vue 的新 Composition API