React Native中如何对抽屉导航链接进行分组？

我已经给抽屉导航配置了各类链接，现在想给这些链接添加标题进行分组，请问该如何实现？

我的代码如下：

import LinkOne from '@/screens/settings/linkone';
import LinkTwo from '@/screens/settings/linktwo';
import LinkThree from '@/screens/settings/linkthree';

export default function Settings({route, navigation}: any) {

  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator
      defaultStatus="open"
      
      screenOptions={{
        drawerType: "permanent",
        headerShown: true,
      }}
      >
          
        <Drawer.Screen 
          name="Link 1" 
          component={LinkOne}
          />
        <Drawer.Screen 
          name="Link 2" 
          component={LinkTwo} 
          />
        <Drawer.Screen 
          name="Link 3" 
          component={LinkThree} 
          />
      
    </Drawer.Navigator>
  );
};

实现方法（基于React Navigation 6+） #

在React Navigation的抽屉导航中，可通过Drawer.Group组件对链接分组，并用label属性设置分组标题，具体修改如下：

步骤1：用Drawer.Group包裹需分组的屏幕 #

将同一类别的Drawer.Screen放在同一个Drawer.Group中，并给Drawer.Group添加label属性作为分组标题。

修改后的代码示例 #

import LinkOne from '@/screens/settings/linkone';
import LinkTwo from '@/screens/settings/linktwo';
import LinkThree from '@/screens/settings/linkthree';

export default function Settings({route, navigation}: any) {

  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator
      defaultStatus="open"
      
      screenOptions={{
        drawerType: "permanent",
        headerShown: true,
      }}
      >
        {/* 第一组：基础设置 */}
        <Drawer.Group label="基础设置">
          <Drawer.Screen 
            name="Link 1" 
            component={LinkOne}
            />
          <Drawer.Screen 
            name="Link 2" 
            component={LinkTwo} 
            />
        </Drawer.Group>

        {/* 第二组：高级设置 */}
        <Drawer.Group label="高级设置">
          <Drawer.Screen 
            name="Link 3" 
            component={LinkThree} 
            />
        </Drawer.Group>
      
    </Drawer.Navigator>
  );
};

额外说明 #

• 若要自定义分组标题样式，可在screenOptions中通过drawerLabelStyle调整，或直接给Drawer.Group设置style属性
• 可根据需求创建多个Drawer.Group，实现多类别链接的分组展示

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