如何在DrawerNavigator的DrawerScreens之间添加DrawerItem

我有如下代码：

<Drawer.Navigator
        initialRouteName="Home"             
        drawerContent={props => {
            return (
                <DrawerContentScrollView {...props}>
                    <DrawerItemList {...props} />
                    <DrawerItem label="B"/>
                </DrawerContentScrollView>                        
            )}
        }}>
        
        <Drawer.Screen options={{
            drawerLabel: 'A',
            title: ''
            }} name="Home" component={HomeScreen} />            
        
        <Drawer.Screen options={{ 
            drawerLabel: 'C', 
            title: ''
            }} name="Login" component={LoginScreen} />

</Drawer.Navigator>

现在我希望把标签为"B"的DrawerItem放在标签为"A"和"C"的Drawer.Screen之间，请问有什么解决方案？

解决方案 #

方案一：手动渲染所有菜单项（适合B不是导航页面的场景） #

DrawerItemList会自动按注册顺序渲染所有Drawer.Screen，无法直接插入自定义项，因此需要放弃DrawerItemList，手动控制所有菜单项的顺序：

1. 先定义包含所有菜单项的配置数组，按你需要的顺序排列：

const drawerMenuItems = [
  // 原有的A项
  { type: 'screen', name: 'Home', label: 'A' },
  // 自定义的B项
  { type: 'custom', label: 'B', onPress: () => {
      // 这里编写B项的点击逻辑，比如弹出提示、跳转页面等
      console.log('点击了B');
      // 若需导航：props.navigation.navigate('TargetScreen')
    }
  },
  // 原有的C项
  { type: 'screen', name: 'Login', label: 'C' },
];

2. 在drawerContent中遍历数组，根据类型渲染对应的组件：

<Drawer.Navigator
  initialRouteName="Home"             
  drawerContent={props => {
    return (
      <DrawerContentScrollView {...props}>
        {drawerMenuItems.map((item, idx) => {
          if (item.type === 'screen') {
            // 渲染原Drawer.Screen对应的菜单项，处理导航逻辑
            return (
              <DrawerItem
                key={idx}
                label={item.label}
                onPress={() => props.navigation.navigate(item.name)}
              />
            );
          }
          // 渲染自定义的B项
          return (
            <DrawerItem
              key={idx}
              label={item.label}
              onPress={item.onPress}
            />
          );
        })}
      </DrawerContentScrollView>                        
    );
  }}>
  {/* 必须保留原Drawer.Screen注册，确保导航功能正常，但隐藏默认的抽屉标签 */}
  <Drawer.Screen 
    options={{ drawerLabel: () => null, title: '' }} 
    name="Home" 
    component={HomeScreen} 
  />            
  <Drawer.Screen 
    options={{ drawerLabel: () => null, title: '' }} 
    name="Login" 
    component={LoginScreen} 
  />
</Drawer.Navigator>

方案二：直接注册为Drawer.Screen（适合B是导航页面的场景） #

如果B本身是一个需要导航到的页面，最简单的方式就是把它注册成Drawer.Screen，放在A和C之间：

<Drawer.Navigator
  initialRouteName="Home"             
>
  <Drawer.Screen 
    options={{ drawerLabel: 'A', title: '' }} 
    name="Home" 
    component={HomeScreen} 
  />            
  <Drawer.Screen 
    options={{ drawerLabel: 'B', title: '' }} 
    name="BScreen" 
    component={BScreen} 
  />
  <Drawer.Screen 
    options={{ drawerLabel: 'C', title: '' }} 
    name="Login" 
    component={LoginScreen} 
  />
</Drawer.Navigator>

这种方式无需自定义drawerContent，直接通过调整Drawer.Screen的顺序实现需求。

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