如何使用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'} 在组件页面和抽屉导航页面中，但它不起作用。

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

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

Answer 1

martnu 为此提供了patch，但尚未合并。 我尝试手动修补它并完美运行。

它只适用于两个文件的更改：（参考此页面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',

1. 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 上也遇到过这个问题。如drawer docs所写 解决方案可以是在路由初始化后立即定义导航选项，并且禁止在定义的路由中显示抽屉导航器。

我的路线看起来像

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

添加了选项，如下路线。

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,
    };
}

Answer 3

现在，react-navigation 版本 5 中发生了一些变化。

swipeEnabled用于将抽屉锁定在Drawer.Screen里面Drawer.Navigator

访问https://reactnavigation.org/docs/drawer-navigator/#swipeenabled

请看下面的代码：

import { createDrawerNavigator } from "@react-navigation/drawer";
import React from "react";
import { Sidebar } from "./SideBar";
import { ScreenWithDrawerEnabled } from "./ScreenWithDrawerEnabled";
import { ScreenWithDrawerDisabled } from "./ScreenWithDrawerDisabled";

const Drawer = createDrawerNavigator();

export const DashboardDrawerNavigator = () => (
  <Drawer.Navigator
    initialRouteName={ScreenWithDrawerEnabled}
    drawerPosition="left"
    drawerType="slide"
    drawerContent={props => <Sidebar {...props} />}
  >
    <Drawer.Screen
      name={'ScreenWithDrawerEnabled'}
      component={ScreenWithDrawerEnabled}
    />
    <Drawer.Screen
      options={({ route, navigation }) => {
        return {
          swipeEnabled: false,
        };
      }}
      name={'ScreenWithDrawerDisabled'}
      component={ScreenWithDrawerDisabled}
    />

  </Drawer.Navigator>
);

Answer 4

您可以通过添加以下内容来显示特定页面的抽屉导航

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

Answer 5

@ajith 的回答帮助了我！

这是我的代码的样子：

const DrawerStack = createDrawerNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                drawerLockMode: 'locked-closed',
            })
            },
        Dashboard: { screen: Dashboard},
        .....
    }, 
DrawerNavigatorConfig)

希望这会有所帮助！ :)