Question

我想禁用滑动以打开抽屉式导航，但不希望关闭吗？

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

drawerLockMode: 'locked-open'

可以，但是我无法通过滑动将其关闭。

我正在打开带有汉堡菜单图标的抽屉，如下所示：

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

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

Answer 1

如果您使用反应导航，则可以获取与导航相关的任何更改时触发的事件。即使是抽屉打开或抽屉关闭事件。（我现在无法提供一个有效的示例。）

有关更多信息，请单击以下链接。 Status of React Navigation drawer? (open or closed) https://reactnavigation.org/docs/en/drawer-based-navigation.html

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

Answer 2

您需要一个react-native-gesture-handler模块才能swipe。

您可以运行

 yarn add react-native-gesture-handler

OR

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

AND 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,参见

Answer 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" });
          }
        }}
      />
    );
  }
}

如何禁用滑动以在本机打开而不是关闭？

3 个答案: