React Navigation 6 隐藏抽屉项目

Question

如何隐藏屏幕，使其不显示为 @react-navigation/drawer 版本 6 抽屉中的项目。

在 React Navigation 5 中，它是通过创建像这样的自定义抽屉内容来实现的

const CustomDrawerContent = (props: DrawerContentComponentProps) => {
  const { state, ...rest } = props;
  const includeNames = ["ScreenOne", "ScreenTwo"];
  const newState = { ...state }; //copy from state before applying any filter. do not change original state
  newState.routes = newState.routes.filter(
    (item) => includeNames.indexOf(item.name) !== -1
  );
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList state={newState} {...rest} />
    </DrawerContentScrollView>
  );
};

如另一个答案中所述。我刚刚升级到react-navigation 6，使用这种技术，当我尝试导航这些隐藏屏幕之一时，我收到错误

TypeError: Cannot read property 'key' of undefined

。有人可以帮我吗？

更新 - 找到解决方案

我自己找到了一个解决方案，因此将其放在这里供其他人查找。设置抽屉项目样式显示隐藏，如下所示：

<DrawerStack.Screen
   name="ScreenName"
   component={ScreenComponent}
   options={{
     drawerItemStyle: {
       display: "none",
     },
   }}
/>

Answer 1

您必须将

headerLeft: false

传递到 Drawer.Screen

    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        options={{title: '', headerTransparent: true, headerLeft: false}}>
        {props => <Home {...props} />}
      </Drawer.Screen>
    </Drawer.Navigator>

Answer 2

抽屉导航在 Darwer.screen 上具有抽屉项目样式属性，将显示设置为无以隐藏抽屉导航上的特定项目

 <Drawer.Screen
    name="notification"
    component={Notification}
    options={{
      drawerItemStyle: {
        display: 'none',
      },
    }}
  />