将图标添加到抽屉react-导航v5

基础概念

React Navigation 是 React Native 应用中常用的导航库，用于管理应用的页面跳转和导航。React Navigation v5 是该库的一个版本，提供了更灵活和强大的导航功能。

类型

React Navigation v5 支持多种导航类型，包括：

栈导航（Stack Navigation）：用于管理页面堆栈，支持前进和后退操作。
抽屉导航（Drawer Navigation）：用于在屏幕边缘显示一个可滑动的菜单。
底部标签导航（Bottom Tab Navigation）：用于在屏幕底部显示多个标签页。
底部堆栈导航（Bottom Stack Navigation）：结合了底部标签导航和栈导航的功能。

应用场景

抽屉导航适用于需要在应用中提供一个侧边菜单的场景，例如：

应用设置：用户可以通过侧边菜单访问应用的设置页面。
用户信息：显示用户的个人信息和账户设置。
功能入口：提供应用的主要功能入口。

如何将图标添加到抽屉导航

以下是一个简单的示例，展示如何在 React Navigation v5 的抽屉导航中添加图标：

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';

const Drawer = createDrawerNavigator();

function HomeScreen() {
  return null;
}

function NotificationsScreen() {
  return null;
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
          options={{
            drawerIcon: ({ color, size }) => (
              <Ionicons name="home" color={color} size={size} />
            ),
          }}
        />
        <Drawer.Screen
          name="Notifications"
          component={NotificationsScreen}
          options={{
            drawerIcon: ({ color, size }) => (
              <Ionicons name="notifications" color={color} size={size} />
            ),
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}