在抽屉导航中隐藏屏幕 - React Native

Question

所以我试图从导航抽屉中删除一个项目，如果它在那里但不显示也没关系，也不应该是可点击的。

<Drawer.Screen name="DetailsScreen" component={DetailsScreen} 
          options={{
            drawerLabel: () => null,
            title: null,
          }}/>

我上面的这段代码在某种程度上有效，因为我希望它是不可点击的，并且当人们从详细屏幕访问菜单时也删除它的突出显示（如果这有意义的话）。任何帮助表示赞赏..

请注意，我的所有屏幕都在 app.js 文件中，因此我没有任何其他组件。

Answer 1

如果你有一些道具，你可以提出一个条件...比如：

{state.props == 'something-true' ?
(<Drawer.Screen name="DetailsScreen" component={DetailsScreen} 
      options={{
        drawerLabel: () => null,
        title: null,
      }}/>) :
null}

Answer 2

您需要制作自定义抽屉，然后为隐藏选项卡设置条件，如下所示。

let hiddenTabs =[] <- from redux; // so you can change dynamically
navigation.state.routes.map((route, index) => {
    const focused = activeItemKey === route.key;
    const scene = { route, index, focused };
    const label = getLabel(scene);
    return (
        !hiddenTabs.includes(label) &&
        <TouchableOpacity key={index.toString()} onPress={() => navigation.navigate(label)}>
          <Text>{label}</Text>
        </TouchableOpacity>
    );
})

不需要在路由器中隐藏屏幕。因为您可以激活这些屏幕更改隐藏选项卡列表。

Answer 3

在选项属性中，尝试

drawerItemStyle: { display: "none" }

。