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

Question

我正在使用react-navigation（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

你也可以使用edgeWidth设置为0您createDrawerNavigator配置：

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

Answer 2

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

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

Answer 3

反应导航 V5

此版本更改了我们设置 Navigation Drawer 属性的方式，因此其他答案将不再有效。而不是设置属性

createDrawerNavigator()

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

<Drawer.Navigator edgeWidth={0} >

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

Answer 4

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

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

其他选项可以在这里查看

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

Answer 5

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

这是我的代码

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

Answer 6

反应导航 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。

Web 上不支持滑动手势。

Answer 7

简单地说，添加到的属性swipeEnabled: false中。screenOptionsNavigator

例子：

<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>