如何在React Navigation中禁用嵌套组件中的Drawer

时间:2018-01-25 13:25:24

标签: react-native navigation router react-navigation drawer

考虑Main组件的渲染:

render() {
 const { isAuthenticated } = this.props;
 return (
  <View>
    {isAuthenticated ? <Dashboard /> : <Login />}
  </View>
);

我想锁定Login组件中的抽屉。现在我知道如果Login不是Main这样的孩子(在我的Router组件中),我就可以实现这一目标:

   Login: {
        screen: Login,
        navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
        }),
    },

但由于LoginMain的孩子而Main有抽屉,Login也会自动拥有抽屉。我已经尝试通过在Login中调用它来“覆盖”它:

static navigationOptions = {
    drawerLockMode: 'locked-closed',
  };

但没有成功。这是我的Router

const Stack = {
    Main: { screen: Main },
    Login: {
        screen: Login,
        navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
        }),
    },
    Outbox: { screen: Outbox },
    Dashboard: { screen: Dashboard },
    JobList: { screen: JobList },
    CreateJob: { screen: CreateJob },
    Reporting: { screen: Reporting },
    JobDescription: { screen: JobDescription },
};

const DrawerRoutes = {
    DrawerStack: {
        name: 'DrawerStack',
        screen: StackNavigator(
            Stack,
            {
                initialRouteName: C.MAIN,
                headerMode: 'none',
                navigationOptions: {
                    gesturesEnabled: false,
                },
            }),
    },
};

export const DrawerNavigation = StackNavigator({
    Drawer: {
        name: 'Drawer',
        screen: DrawerNavigator(DrawerRoutes, {
            contentComponent: DrawerPanel,
        }),
    },
    ...Stack,
}, { headerMode: 'none' });

有没有办法实现这个目标?

0 个答案:

没有答案