打开时隐藏抽屉中的抽屉物品

Question

我希望有一个屏幕作为抽屉路线的一部分,但在抽屉打开时不可见(抽屉物品).这是我的配置:

const DrawerRoutes = {
    Home: {
        name: 'Home',
        screen: StackNavigator(HomeStack, { initialRouteName: 'HomeTab', ...navOptions })
    },
    Notifications: {
        name: 'Notifications',
        screen: StackNavigator(Stack, { initialRouteName: 'NotificationsTab', ...navOptions })
    },
    LastAdded: {
        name: 'LastAdded',
        screen: StackNavigator(VideosStack, { initialRouteName: 'LastAddedTab', ...navOptions })
    },
    ChangeLog: {
        name: 'ChangeLog',
        screen: StackNavigator(Stack, { initialRouteName: 'ChangelogTab', ...navOptions })
    },
    AboutUs: {
        name: 'AboutUs',
        screen: StackNavigator(Stack, { initialRouteName: 'AboutUsTab', ...navOptions })
    },
    Test: {
        name: 'Test',
        screen: StackNavigator(ProfileStack, { initialRouteName: 'ProfileScreen', ...navOptions })
    }
};

export const DrawerNav =
    DrawerNavigator(
        DrawerRoutes, {
            drawerWidth: windowWidth - Normalize(48),
            contentOptions: {
                activeBackgroundColor: Colors.selectedRowHeader,
                activeTintColor: Colors.navigationBar,
                labelStyle: {
                    fontSize: 16,
                    fontFamily: Fonts.light,
                    color: Colors.navigationBar,
                }
            },
            contentComponent: props => {
                return (<View style={styles.container}>
                    <StatusBar />
                    <Header />
                    <DrawerItems {...props} />
                    <LogOut {...props} />
                </View>);
            }
        },
        { headerMode: 'none' }
    );

在上面的代码中,项目'Test'不应该是可见的,但我希望能够使用navigation.navigate('Test')导航到'Test'.即使我从另一个屏幕(完全按照我想要的)制作导航,导航仍在工作,但抽屉正在显示它.这是一个截图:

Answer 1

来自https://github.com/react-community/react-navigation/issues/2021
如果要隐藏抽屉中的测试.

class Hidden extends React.Component {
  render() {
    return null;
  }
}

const Main = DrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Test: {
    screen: TestScreen,
    navigationOptions: {
      drawerLabel: <Hidden />
    }
  }
}, {});

Answer 2

我对此有两个想法。您可以设置drawerLabel:()=>null在navigationOptions在DrawerRoutes：

Test: {
screen: MyTestScreen,
navigationOptions: {
  drawerLabel: ()=>null,
}}

或在MyTestScreen类中：

static navigationOptions={
drawerLabel:()=> null,};