在 React Native 中将抽屉中的导航链接分组

Question

我的抽屉导航有链接，但是我想用如下标题对链接进行分组。我怎样才能实现这个目标？

以下是我的代码：

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>
  );
};

Answer 1

我设法找到了解决方法。添加了一个带有

DummyComponent

的新抽屉屏幕，并使用

listeners

阻止了默认的单击操作。

请记住为您的

initialRouteName="Link 1"

 定义 

Drawer.Navigator

<Drawer.Screen 
  name="Title A" 
  component={DummyComponent}
  options={{
    drawerLabelStyle: { 
      color : 'gray',
      textTransform: 'uppercase'
    }
  }}
  listeners={{
    drawerItemPress: (e) => {
      e.preventDefault(); // Prevent default action
    },
  }}
/>