如何使用drawerNavigation [react-navigation] [react-native]锁定特定页面的抽屉

Question

这是我的抽屉导航:

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'
});

导出默认的DrawerStack

如何将锁定模式添加lockMode到特定页面.

我尝试添加 drawer: {lockMode: 'locked-closed'} 组件页面和drawerNavigation页面,但它不起作用.

反应导航是否具有锁定模式功能还是需要禁用滑动手势？

如果没有功能,请告诉我如何禁用特定组件或页面的滑动手势.

Answer 1

martnu为此提供了补丁,但尚未合并.我尝试手动修补它并且工作得很好.

它仅适用于两个文件的更改:(参考此页面https://github.com/react-community/react-navigation/pull/793/files)

1. react-navigation/src/TypeDefinition.js,

将以下代码复制到NavigationDrawerScreenOptions右上方NavigationRouteConfigMap,进行声明NavigationDrawerScreenOptions:

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

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

render()在函数返回之前将代码复制到右边:

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

并将以下代码复制到返回的<DrawLayout>道具中,紧接着ref:

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

用法:

您只需添加以下内容即可在任何屏幕上禁用抽屉:

navigationOptions: {
  drawerLockMode: 'locked-closed'
}

并启用抽屉:

navigationOptions: {
  drawerLockMode: 'unlocked'
}

Answer 2

我也在 react-navigation v2 上遇到过这个问题。正如抽屉文档中所写， 解决方案可以是在路线初始化后立即定义导航选项，并且禁止在定义的路线中显示抽屉导航器。

我的路线看起来像

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

并添加了选项，如下路线。

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