如何禁用滑动打开但不关闭反应原生？答案

【问题标题】：How to disable swipe to open but not for closing in react-native?如何禁用滑动打开但不关闭反应原生？
【发布时间】：2019-12-18 21:31:05
【问题描述】：

我想禁用滑动打开抽屉导航而不是关闭？

我找到了适用于 android 的解决方案，但没有找到 react-native 的解决方案。目前我正在使用这个：

drawerLockMode: 'locked-open'

这可行，但我无法通过滑动关闭它。

我用这样的汉堡菜单图标打开抽屉：

onPress={() => props.navigation.toggleDrawer()}

这里有人已经这样做了吗？有没有办法在全球范围内设置drawerLockMode？ onDrawerOpened 和 onDrawerClosed 道具是否存在？谢谢！

【问题讨论】：

标签： react-native react-native-navigation react-native-drawer

【解决方案1】：

如果您使用 react-navigation，您可以获得与导航相关的任何更改时触发的事件。即使是抽屉打开或抽屉关闭事件。（我现在不能举一个可行的例子。）

尝试获取事件对象信息以检测并覆盖行为。

【讨论】：

这有点帮助，但我仍然不知道如何动态更改drawerLockMode。
不要使用它。你不能使用 isDrawerOpen 布尔值来检查它是否已经打开并识别抽屉的当前状态吗？很抱歉我不能举个例子。
你的意思是在createDrawerNavigation?
是的，试试看
它不会那样工作，因为它只被调用一次。

【解决方案2】：

你需要一个react-native-gesture-handler 模块到swipe。

你可以跑

 yarn add react-native-gesture-handler

OR

npm install --save react-native-gesture-handler

与react-native link react-native-gesture-handler

更新您的MainActivity.java 文件（或创建ReactActivityDelegate 实例的任何位置），以便它覆盖负责创建ReactRootView 实例的方法，然后使用此库提供的根视图包装器。不要忘记导入ReactActivityDelegate、ReactRootView和RNGestureHandlerEnabledRootView：

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

For more information,见

【讨论】：

这不是我需要的。我用滑动打开抽屉，但我想用滑动关闭它
我很确定有一些内置的东西可以解决这个问题

【解决方案3】：

这是对我有用的解决方案，我认为它简单易行：

import { DrawerNavigator } from "../router/router";
import React, { Component } from "react";

export default class Drawer extends Component {
  state = {
    lockMode: "locked-closed"
  };
  render() {
    return (
      <DrawerNavigator
        screenProps={{
          drawerLockMode: this.state.lockMode
        }}
        onNavigationStateChange={(prevState, newState, action) => {
          if (
            action.type === "Navigation/MARK_DRAWER_SETTLING" &&
            !action.willShow
          )
            this.setState({ lockMode: "locked-closed" });
          if (
            action.type === "Navigation/MARK_DRAWER_SETTLING" &&
            action.willShow
          ) {
            this.setState({ lockMode: "unlocked" });
          }
        }}
      />
    );
  }
}

【讨论】：