How to Lock drawer for specific page using drawerNavigation [react-navigation][react-native]

问题

This is my drawerNavigation :

const DashboardStack = StackNavigator({
        Dashboard: {
            screen: Dashboard
        },
    }, {
        headerMode: 'screen',
    });

const DetailsformStack = StackNavigator({
    Detailsform: {
        screen: Detailsform
    },
}, {
    headerMode: 'none'
});

const OtpStack = StackNavigator({
    Otp: {
        screen: Otp,
        drawer: {
            lockMode: 'locked-closed'
        }
    },
    }, {
        headerMode: 'none'
});

const MobilenumberStack = StackNavigator({
    Mobilenumber: {
        screen: Mobilenumber
    },
}, {
    headerMode: 'none'
});

const DrawerviewStack = StackNavigator({
    Drawerview: {
        screen: Drawerview
    },
}, {
    headerMode: 'none'
});

const ExamsheetStack = StackNavigator({
    Examsheet: {
        screen: Examsheet
    },
}, {
    headerMode: 'none'
});

const TopicStack = StackNavigator({
    Topic: {
        screen: Topic
    },
}, {
    headerMode: 'screen'
});

const DrawerStack = DrawerNavigator({
    Otp: {
        screen: OtpStack,
    },
    Dashboard: {
        screen: DashboardStack,
    },
    Detailsform: {
        screen: DetailsformStack,
    },
    Mobilenumber: {
        screen: MobilenumberStack,
    },
    Drawerview: {
        screen: DrawerviewStack,
    },
    Examsheet: {
        screen: ExamsheetStack,
    },
    Topic: {
        screen: TopicStack,
    }
}, {
    headerMode: 'none',
    initialRouteName: 'Mobilenumber',
    contentComponent: Drawerview,

    lockMode: 'locked-closed'
});

export default DrawerStack

How can i add lock mode lockMode to specific page.

i tried adding drawer: {lockMode: 'locked-closed'} in both components page and drawerNavigation page but it doesnt work.

Does react navigation have a lock mode feature or do i need to disable the swipe gesture?

If there is no feature then let me know how to disable swipe gesture for a particular component or page.

回答1:

martnu gave a patch for this, but not yet merged. I tried to patch it manually and works perfectly.

It works with only change of two files: (reference to this page https://github.com/react-community/react-navigation/pull/793/files)

react-navigation/src/TypeDefinition.js,

copy below code into NavigationDrawerScreenOptions, right above NavigationRouteConfigMap, put into declaration of NavigationDrawerScreenOptions:

drawerLockMode?: 'unlocked' | 'locked-close' | 'locked-open',

react-navigation/src/views/DrawerView.js,

copy below code into render() right before function return:

const options = this.props.router.getScreenOptions(
    addNavigationHelpers({
        state: this._screenNavigationProp.state,
        dispatch: this._screenNavigationProp.dispatch,
    }),
    this.props.screenProps,
);

and copy below code into returning <DrawLayout> props, right after ref:

drawerLockMode={options.drawerLockMode || 'unlocked'}

Usage:

you can disable the drawer on any screen by just adding:

navigationOptions: {
  drawerLockMode: 'locked-closed'
}

and to enable drawer:

navigationOptions: {
  drawerLockMode: 'unlocked'
}

回答2:

I also have faced this on react-navigation v2. as written in drawer docs the solution can be to define navigation options right after routes initialization and it forbids to display Drawer navigator in defined routes.

My routes looks like

const RoutesStack = StackNavigator({
    Authentication: {
        screen: Authentication,
    },
    {...}
});

And Options added, bellow routes.

RoutesStack.navigationOptions = ({ navigation }) => {
    name = (navigation.state.index !== undefined ? navigation.state.routes[navigation.state.index] : navigation.state.routeName)
    let drawerLockMode = 'locked-closed'
    if (name.routeName != 'Authentication' && name.routeName != 'Signup') {
        drawerLockMode = 'unlocked'
    }

    return {
        drawerLockMode,
    };
}

回答3:

You can show Drawer navigato for specific page by adding the following

.......
  Dashboard :{
      screen: DashboardStack,
      navigationOptions: ({ navigation }) => ({
        drawerLockMode: 'unlocked',
      })
  }
.......

来源：https://stackoverflow.com/questions/43885690/how-to-lock-drawer-for-specific-page-using-drawernavigation-react-navigationr

标签

react-native

react-navigation