React Native Drawer导航器自定义求助：样式调整与功能添加

一、自定义文字样式 #

在Drawer.Navigator的screenOptions中添加样式配置，直接控制导航项文字的大小、选中/未选中状态的颜色：

screenOptions={{
  drawerStyle: { width: '60%' },
  drawerActiveTintColor: "#BC4B52",
  // 自定义文字大小、字重
  drawerLabelStyle: { fontSize: 16, fontWeight: '500' },
  // 未选中项文字颜色
  drawerInactiveTintColor: '#666666'
}}

二、添加顶部头像与底部登出按钮 #

通过Drawer.Navigator的drawerContent属性自定义抽屉内容，实现顶部头像、保留原有导航项、底部登出按钮的布局：

1. 先导入所需组件：

import { DrawerContentScrollView, DrawerItemList, TouchableOpacity, Image, Text, View } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';

2. 定义自定义抽屉内容组件：

const CustomDrawerContent = (props) => {
  const handleLogout = () => {
    // 这里写入你的登出逻辑，比如清除本地存储、跳转登录页
    console.log('执行登出操作');
  };

  return (
    <DrawerContentScrollView {...props}>
      {/* 顶部头像区域 */}
      <View style={{ alignItems: 'center', paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
        <Image
          source={{ uri: 'https://example.com/avatar.jpg' }} // 替换为你的头像地址或本地图片路径
          style={{ width: 80, height: 80, borderRadius: 40, marginBottom: 10 }}
        />
        <Text style={{ fontSize: 18, fontWeight: '600', color: '#333' }}>你的用户名</Text>
      </View>

      {/* 保留原有导航项列表 */}
      <DrawerItemList {...props} />

      {/* 底部登出按钮 */}
      <View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#eee', marginTop: 'auto' }}>
        <TouchableOpacity onPress={handleLogout} style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Ionicons name="log-out-outline" size={24} color="#BC4B52" />
          <Text style={{ marginLeft: 10, fontSize: 16, color: '#BC4B52' }}>登出</Text>
        </TouchableOpacity>
      </View>
    </DrawerContentScrollView>
  );
};

3. 在Drawer.Navigator中引入该自定义组件：

<Drawer.Navigator
  initialRouteName="DashBoard"
  screenOptions={{
    drawerStyle: { width: '60%' },
    drawerActiveTintColor: "#BC4B52",
    drawerLabelStyle: { fontSize: 16, fontWeight: '500' },
    drawerInactiveTintColor: '#666666'
  }}
  drawerContent={(props) => <CustomDrawerContent {...props} />} // 绑定自定义抽屉内容
>
  {/* 原有Screen项保持不变 */}
  <Drawer.Screen
    name='DashBoard'
    component={DashBoard}
    options={{
      drawerType: 'front',
      title: "dashboard",
      headerShown: false,
    }}
  />
  <Drawer.Screen
    name='Profile'
    component={ProfileScreen}
    options={{
      headerShown: false,
      drawerIcon: () =>
        <Ionicons name="md-person-outline" size={30} color="black" />
    }}
  />
  <Drawer.Screen
    name='Airtime'
    component={AirtimeScreen}
    options={{
      headerShown:false,
      drawerIcon:()=>
        <Ionicons name="cash-outline" size={30} color="black" />
    }}
  />
</Drawer.Navigator>

完整整合代码 #

import React from 'react';
import { SafeAreaProvider, DrawerContentScrollView, DrawerItemList, TouchableOpacity, Image, Text, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Ionicons from '@expo/vector-icons/Ionicons';
// 导入你的页面组件
import DashBoard from './DashBoard';
import ProfileScreen from './ProfileScreen';
import AirtimeScreen from './AirtimeScreen';

function ProfileDrawer() {
  const Drawer = createDrawerNavigator();

  const CustomDrawerContent = (props) => {
    const handleLogout = () => {
      // 实现登出逻辑
      console.log('用户登出');
    };

    return (
      <DrawerContentScrollView {...props}>
        {/* 顶部头像区域 */}
        <View style={{ alignItems: 'center', paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
          <Image
            source={{ uri: 'https://example.com/avatar.jpg' }}
            style={{ width: 80, height: 80, borderRadius: 40, marginBottom: 10 }}
          />
          <Text style={{ fontSize: 18, fontWeight: '600', color: '#333' }}>你的用户名</Text>
        </View>

        {/* 原有导航列表 */}
        <DrawerItemList {...props} />

        {/* 底部登出按钮 */}
        <View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#eee', marginTop: 'auto' }}>
          <TouchableOpacity onPress={handleLogout} style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Ionicons name="log-out-outline" size={24} color="#BC4B52" />
            <Text style={{ marginLeft: 10, fontSize: 16, color: '#BC4B52' }}>登出</Text>
          </TouchableOpacity>
        </View>
      </DrawerContentScrollView>
    );
  };

  return (
    <SafeAreaProvider>
      <Drawer.Navigator
        initialRouteName="DashBoard"
        screenOptions={{
          drawerStyle: { width: '60%' },
          drawerActiveTintColor: "#BC4B52",
          drawerLabelStyle: { fontSize: 16, fontWeight: '500' },
          drawerInactiveTintColor: '#666666'
        }}
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen
          name='DashBoard'
          component={DashBoard}
          options={{
            drawerType: 'front',
            title: "dashboard",
            headerShown: false,
          }}
        />
        <Drawer.Screen
          name='Profile'
          component={ProfileScreen}
          options={{
            headerShown: false,
            drawerIcon: () =>
              <Ionicons name="md-person-outline" size={30} color="black" />
          }}
        />
        <Drawer.Screen
          name='Airtime'
          component={AirtimeScreen}
          options={{
            headerShown:false,
            drawerIcon:()=>
              <Ionicons name="cash-outline" size={30} color="black" />
          }}
        />
      </Drawer.Navigator>
    </SafeAreaProvider>
  );
}

export default ProfileDrawer;

内容的提问来源于stack exchange，提问作者Damisi Babalola