Question

我正在使用反应导航（https://reactnavigation.org），并且尝试禁用当用户向右/向左滑动时打开侧抽屉的选项

我仔细阅读了文档，但找不到能解决问题的选项

const RootStack = createDrawerNavigator(
  {
    Login: {
      screen: Login,
    },
    Components: {
      screen: Components
    },
    Home: {
      screen: Home
    }
  },
  {
    initialRouteName: 'Login',
    gesturesEnabled: false,
    headerMode: 'none',
    contentComponent: SideBar,
    contentOptions: {
      labelStyle: {
        color: 'white'
      }
    }
  }
);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      'Montserrat-Light': require("./app/assets/fonts/Montserrat-Light.ttf"),
      'Montserrat-Medium': require("./app/assets/fonts/Montserrat-Medium.ttf")
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return (
        <Text>Loading</Text>
      );
    }
    return (
      <RootStack/>
    );
  }
}

Answer 1

React Navigation V5

此版本更改了我们设置导航抽屉属性的方式，因此其他答案将不再起作用。而不是在

中设置属性

createDrawerNavigator()

像这样在JSX标记中设置它们

<Drawer.Navigator edgeWidth={0} >

这将禁用滑动打开功能，同时保持滑动关闭功能。

Answer 2

您可以使用locked-open选项在屏幕导航选项中使用drawerLockMode

已锁定打开：the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically

可以查看其他选项here

static navigationOptions = {
     drawerLockMode: 'locked-open',
}

Answer 3

您还可以在createDrawerNavigator配置中使用设置为0的 edgeWidth ：

const drawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home
  }
}, 
{
  edgeWidth: 0
})

Answer 4

我找到了禁用它的方法，它不会打开，但仍然可以通过滑动来关闭...

这是我的代码

  contentComponent: SideMenu,
  initialRouteName: 'Stack',
  drawerPosition: 'left',
  drawerWidth: '80%',
  edgeWidth: -100 // this is where the magic happens :))

Answer 5

React Navigation v5：

您可以在“抽屉”屏幕上使用swipeEnabled:false道具。

示例

<Drawer.Screen
   name="ExamplePage"
   component={ExampleComponent}
   options={{
       title: 'Example Page Title',
       swipeEnabled: false, // to disable swipe gesture for a specific page(s)
   }}
/>

文档：https://reactnavigation.org/docs/drawer-navigator/#swipeenabled

来自文档：

是否可以使用滑动手势打开或关闭抽屉。默认为true。

网络上不支持滑动手势。

Answer 6

如果您仍在寻找答案，请确认。我有同样的问题，我避免滑动打开的唯一方法是以下内容。

在抽屉导航器中，您将拥有屏幕，您需要做的是将“option”道具和其中的“swipeEnabled: false”传递给您想要隐藏抽屉的屏幕，如下所示：

    <Drawer.Navigator
      initialRouteName="name"
      drawerContent={(props) => <DrawerContent {...props} />}
    >
    <Drawer.Screen
        name="name"
        component={component}
        options={{ swipeEnabled: false }}
      />
    </Drawer.Navigator>

Answer 7

我正面临使用以下方法解决的类似问题

使用disableGestures: true

禁用/启用手势模式

抽屉可以锁定为3种状态：

已解锁（默认）-表示抽屉将响应（打开/关闭）触摸手势。
锁定关闭-表示抽屉将保持关闭状态且不响应手势。
锁定打开-表示抽屉将保持打开状态并且不响应手势。

enum('unlocked', 'locked-closed', 'locked-open')

仍可以通过编程方式打开和关闭抽屉（openDrawer / closeDrawer）。

mainflow: createDrawerNavigator({
    HomeScreen: HomeScreen,
    DrawerScreen2: DrawerScreen2,
    DrawerScreen3: DrawerScreen3,

    Notifications: {
        screen: Notifications,
        navigationOptions: {
            header: null,
            drawerLockMode: "locked-closed",
            disableGestures: true

        }
    }
})

Answer 8

在第4版的

createDrawerNavigator内，您需要添加

  defaultNavigationOptions: {
       drawerLockMode: 'locked-closed',
  }

Answer 9

在react-navigation v5中，您可以通过传递swipeEnabled: false来禁用特定屏幕的滑动手势：

      <DrawerNavigator.Screen
        name='ScreenName'
        component={Screen}
        options={{
          swipeEnabled: false,
        }}
      />

Answer 10

只需添加 swipeEnabled: false 到 Navigator 的 screenOptions 属性

示例：

        <DrawerOptionsNavigator.Navigator
            screenOptions={{swipeEnabled: false}} // add swipeEnabled to false to disable the swipe gesture from all screens inside drawer
        >
            <DrawerOptionsNavigator.Screen
                name="Home"
                component={RootNavigator}
            />
        </DrawerOptionsNavigator.Navigator>

Answer 11

对于当前的React Navigation版本3.11.1，您可以通过在创建抽屉式导航器时添加抽屉锁模式轻松地做到这一点。如果要防止手势打开抽屉，但允许在抽屉外部单击以关闭抽屉，则将“锁定打开”更改为“锁定关闭”。

const Drawer = createDrawerNavigator({
    Home: MainStack,
    Driver: ManageRideTabStack,
    Passenger: ManageRequestTabStack,
    FeedbackPage: FeedbackStack,
}, {
    hideStatusBar: false,
    drawerBackgroundColor: 'rgba(255,255,255,.9)',
    overlayColor: '#9FF7B3',
    contentOptions: {
        activeTintColor: '#fff',
        activeBackgroundColor: '#4DD0E1',
        labelStyle: {
           fontSize: 16,
        },
    },
    drawerLockMode: 'locked-closed',
});

使用反应导航禁用滑动手势打开导航抽屉

11 个答案:

示例：