如何在React Navigation Drawer的DrawerItemList中插入自定义分类内容

解决方案 #

DrawerItemList默认会一次性渲染所有抽屉菜单项，你只需要将路由列表按你的需求拆分成多组，分别渲染DrawerItemList，在两组之间插入自定义的分类文本组件即可，跳转逻辑、选中高亮等原生行为完全不受影响。

修改后的代码如下：

import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator()

const CustomDrawerContent=(props) =>{
  // 获取所有抽屉路由列表
  const allRoutes = props.state.routes;
  // 定位分割点：找到'Análises Rejeitadas'对应的路由索引
  const splitIndex = allRoutes.findIndex(route => route.name === 'Análises Rejeitadas');
  // 拆分两组路由
  const firstGroupRoutes = allRoutes.slice(0, splitIndex + 1);
  const secondGroupRoutes = allRoutes.slice(splitIndex + 1);

  // 生成两组菜单的专属props
  const firstGroupProps = {
    ...props,
    state: { ...props.state, routes: firstGroupRoutes }
  };
  const secondGroupProps = {
    ...props,
    state: { ...props.state, routes: secondGroupRoutes }
  };

  return (
    <DrawerContentScrollView {...props}>
      <View style={{flex:1}}>
        <View style={styles.userArea}>
          <Image style={styles.pfp} source={{ uri: auth.currentUser.photoURL }}></Image>
          <Text style={styles.name}>José Freitas</Text>
          <Text>{auth.currentUser.email}</Text>
        </View>
      </View>
      <View style={styles.line}/>
      {/* 渲染第一组菜单 */}
      <DrawerItemList {...firstGroupProps} />
      {/* 插入自定义分类文本，样式可按需调整 */}
      <View style={{ paddingHorizontal: 18, paddingVertical: 10, marginTop: 4 }}>
        <Text style={{ fontSize: 13, color: '#888', fontWeight: '500' }}>资源管理</Text>
      </View>
      {/* 渲染第二组菜单 */}
      <DrawerItemList {...secondGroupProps} />
    </DrawerContentScrollView>
  );
}

const DrawerNavigator = () => {
   return (
    
    <Drawer.Navigator initialRouteName='TabNavigator' drawerContent={CustomDrawerContent}> 
        <Drawer.Screen name='Início' component={TabNavigator}/>
        <Drawer.Screen name="Lista de Espera" component={PermissionsStackScreen} />
        <Drawer.Screen name="Comunidade" component={CommunityStackScreen} />
        <Drawer.Screen name='Análises em Espera' component={AwaitingStackScreen}/>
        <Drawer.Screen name='Confirmar Análises' component={VerifyStackScreen}/>
        <Drawer.Screen name='Análises Rejeitadas' component={RejectedStackScreen}/>
        <Drawer.Screen name='Gerir Reagentes' component={ReagentStackScreen}/>
        <Drawer.Screen name='Gerir Equipamentos' component={EquipmentStackScreen}/>
    </Drawer.Navigator>
  );
  
}

export default DrawerNavigator

注意事项 #

• 路由匹配的名称必须和你定义Drawer.Screen的name属性完全一致，否则会出现拆分错误
• 如果需要添加更多分组，按相同逻辑拆分多段路由数组，每组之间插入自定义内容即可

内容的提问来源于stack exchange，提问作者José Freitas