React Native 抽屉导航 - JavaScript 教程

摘要：在本教程中，您将学习如何从 React Navigation 库创建抽屉导航器。

React Native 抽屉导航简介

抽屉是一个 UI 元素，它从屏幕的左侧或右侧边缘滑出。它包含一个菜单项列表，您可以选择它们以导航到不同的屏幕。

通常，您可以通过点击一个按钮（例如汉堡图标）或通过滑动手势来打开抽屉。

抽屉导航是移动应用程序中常见的模式。要设置抽屉导航，可以使用 React Navigation 库提供的抽屉导航器。

创建 React Native 应用程序

在本节中，您将探讨如何设置和使用抽屉导航。

要求

在开始之前，请确保您拥有以下内容：

react-native >= 0.63.0
expo >= 41（如果您使用 Expo Go）

设置新项目

首先，打开您的终端并执行以下命令以创建一个新的 React Native 应用程序

npx create-expo-app drawer --template blankCode language: JavaScript (javascript)

此命令创建了 drawer 目录并初始化了 React Native 应用程序结构。

其次，导航到项目目录 drawer

cd drawerCode language: JavaScript (javascript)

第三，通过执行以下命令安装 React Navigation 库及其依赖项

npm install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimatedCode language: JavaScript (javascript)

创建屏幕

步骤 1. 在项目目录中创建一个名为 screens 的新目录以存储屏幕。

步骤 2. 在 screens 目录中创建一个 Home 屏幕

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Home = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Home Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Home;Code language: JavaScript (javascript)

步骤 3. 在 screens 目录中创建一个 Profile 屏幕

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Profile = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Profile Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Profile;Code language: JavaScript (javascript)

步骤 4. 在 screens 目录中创建一个 index.js，导入 Home 和 Profile 屏幕，并立即导出它们

import Home from './Home.jsx';
import Profile from './Profile.jsx';

export { Home, Profile }Code language: JavaScript (javascript)

步骤 5. 将 Home 和 Profile 屏幕导入到 App.js 文件中，并将 Home 屏幕作为主组件放置

import { Home, Profile } from './screens/index';

export default function App() {
  return (
    <Home />
  );
}Code language: JavaScript (javascript)

步骤 6. 打开终端并运行应用程序

npm startCode language: JavaScript (javascript)

设置抽屉导航

步骤 1. 使用以下代码修改 App.js

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Home, Profile } from './screens/index';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Profile" component={Profile} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;Code language: JavaScript (javascript)

输出

它是如何工作的。

首先，导入 NavigationContainer 组件和 createDrawerNavigator 函数

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';Code language: JavaScript (javascript)

其次，导入 Home 和 Profile 屏幕

import { Home, Profile } from './screens/index';Code language: JavaScript (javascript)

第三，通过调用 createDrawerNavigator() 函数创建一个抽屉导航器对象

const Drawer = createDrawerNavigator();Code language: JavaScript (javascript)

抽屉导航器对象 (Drawer) 具有两个属性

导航器
屏幕

第四，设置抽屉导航

<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={Home} />
    <Drawer.Screen name="Profile" component={Profile} />
  </Drawer.Navigator>
</NavigationContainer>Code language: JavaScript (javascript)

NavigationContainer 组件管理导航树和状态。要启用导航，我们将抽屉导航器包装在 NavigationContainer 组件中。这使 React Navigation 能够在不同的屏幕上正确地管理导航状态。

Drawer.Navigator 组件设置抽屉导航器。它管理抽屉的状态和行为，例如打开、关闭和在屏幕之间导航。

可选的 initialRouteName 属性指定要首先呈现的屏幕。如果您没有指定 initialRouteName 属性，Drawer.Navigator 将显示列表中的第一个屏幕。

Drawer.Screen 组件声明可以通过抽屉访问的屏幕

name 定义路由的名称，可以通过编程方式引用它。
component 指定选中屏幕时要呈现的组件。在本例中，我们指定了两个组件 Home 和 Profile，它们对应于这两个屏幕。

应用程序启动时，NavigationContainer 初始化导航上下文，Drawer.Navigator 设置抽屉导航。它根据 Drawer.Screen 组件的指定，将两个屏幕添加到抽屉中。

打开抽屉时，您将看到两个选项：Home 和 Profile。

抽屉将显示 Home 屏幕，因为我们将其定义为抽屉导航器组件中的 initialRouteName。如果您选择 Profile，它将呈现 Profile 屏幕。

自定义抽屉

我们将通过添加一个标题（包括头像、姓名和标题）来自定义抽屉。此外，我们还将在每个导航项中添加一个图标。

步骤 1. 下载并复制以下 avatar.png 文件到 assets 目录

步骤 2. 修改 App.js 文件以自定义抽屉

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';
import Icon from '@expo/vector-icons/MaterialCommunityIcons';
import { Home, Profile } from './screens/index';
import { View, Text, StyleSheet, Image } from 'react-native';


const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerContent={
          (props) => {
            return (
              <View style={styles.drawer}>
                <View style={styles.drawerHeader}>
                  <Image source={require('./assets/avatar.png')} style={styles.logo} />
                  <Text style={styles.title}>John Smith</Text>
                  <Text style={styles.subtitle}>Developer</Text>
                </View>
                <DrawerItemList  {...props} />
              </View>
            );
          }
        }
        screenOptions={{
          drawerStyle: {
            width: 250
          },
          drawerActiveBackgroundColor: '#eee',
          drawerLabelStyle: {
            color: '#111',
            marginLeft: -20,
          }
        }}

      >
        <Drawer.Screen
          name="Home"
          component={Home}
          options={{
            drawLabel: 'Home',
            title: 'Home',
            drawerIcon: () => <Icon name="home-outline" size={24} color="black" />
          }}
        />
        <Drawer.Screen
          name="Profile"
          component={Profile}
          options={{
            drawLabel: 'Profile',
            title: 'Profile',
            drawerIcon: () => <Icon name="account-outline" size={24} color="black" />
          }} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  drawer: {
    flex: 1,
  },
  drawerHeader: {
    paddingTop: 20,
    width: '100%',
    height: 180,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    backgroundColor: '#f9dc5c'
  },
  logo: {
    width: 80,
    height: 80,
    borderRadius: 40,
    resizeMode: 'center',
    marginBottom: 10
  },
  title: {
    fontSize: 20,
    color: '#323330',
    fontWeight: 'bold'
  },
  subtitle: {
    fontSize: 14,
    color: '#444'
  }
});

export default App;

Code language: JavaScript (javascript)

它是如何工作的。

以下是组件列表

NavigationContainer 组件包装抽屉导航并管理导航状态。
Drawer.Navigator 组件创建一个抽屉导航器。
Drawer.Screen 组件表示抽屉导航器中的每个屏幕。
DrawerItemList 组件呈现抽屉项列表。
Icon 组件显示来自 @expo/vector-icons 包的图标。

首先，使用 NavigationContainer 组件包装抽屉导航，以便正确管理导航状态

<NavigationContainer>
</NavigationContainer>Code language: JavaScript (javascript)

其次，在 Drawer.Navigator 组件中将初始路由名称设置为 Home 屏幕，并使用 drawerContent 属性自定义抽屉内容

<Drawer.Navigator
        initialRouteName="Home"
        drawerContent={/*...*/}>Code language: HTML, XML (xml)

抽屉内容显示头像、姓名 (John Smith)、标题 (developer) 和抽屉项列表。DrawerItemList 组件根据传递给 drawerContent 函数的 props 呈现导航项。

第三，使用 screenOptions 属性设置抽屉属性

drawerStyle 属性将抽屉的宽度设置为 250。
drawerActiveBackgroundColor 将活动抽屉项的背景颜色设置为浅灰色 (#eee)。
drawerLabelStyle：设置抽屉项标签的颜色和 marginLeft。

最后，为抽屉导航项设置屏幕。对于每个屏幕，设置路由名称 (name)、要呈现的组件 (component) 以及标签和图标的选项

  <Drawer.Screen
    name="Home"
    component={Home}
    options={{
      drawLabel: 'Home',
      title: 'Home',
      drawerIcon: () => <Icon name="home-outline" size={24} color="black" />
    }}
  />
  <Drawer.Screen
    name="Profile"
    component={Profile}
    options={{
      drawLabel: 'Profile',
      title: 'Profile',
      drawerIcon: () => <Icon name="account-outline" size={24} color="black" />
    }} />Code language: JavaScript (javascript)

输出

总结

使用 React Navigation 中的抽屉导航器创建抽屉导航。

本教程是否有帮助？