如何在react-native-navigation-drawer-extension中禁用抽屉侧滑关闭

解决方案 #

你使用的 v3.x 版本 react-native-navigation-drawer-extension 针对 RNN7 调整了侧滑手势的配置逻辑，原有写法的参数位置和属性名不匹配，按以下步骤处理即可：

• 方案1：调整配置参数（优先尝试）
  该版本禁用侧滑关闭的属性不是 swipeToDismiss，也无需放在 passProps 或外层 options 中，需对齐 RNN 的 sideMenu 配置规则，放在抽屉组件的 options 下，对应你设置的抽屉方向（示例中是右侧）配置 swipeEnabled: false，修改后代码如下：

  RNNDrawer.showDrawer({
    component: {
      name: Screens.Menu,
      passProps: {
        animationOpenTime: 300,
        animationCloseTime: 300,
        direction: 'right',
        dismissWhenTouchOutside: true,
        fadeOpacity: 0.6,
        parentComponentId: componentId ? componentId : Screens.Main,
      },
      options: {
        statusBar: statusBar,
        sideMenu: {
          right: { // *抽屉为左侧方向则改为 left*
            swipeEnabled: false
          }
        }
      },
    }
  });
  

  如果修改后还是不生效，可先将依赖升级到 react-native-navigation-drawer-extension@3.0.2，该版本修复了 3.0.0 存在的侧滑配置不生效的已知问题，小版本升级无兼容改动。

• 方案2：组件内部拦截手势（兜底方案）
  如果升级依赖和调整配置后依旧有侧滑卡顿问题，可直接在抽屉组件（Screens.Menu对应的组件）的根视图上拦截横向滑动手势，阻止手势传递到底层抽屉控制逻辑，示例代码如下：

  import { View } from 'react-native';
  
  const MenuDrawer = () => {
    return (
      <View 
        onMoveShouldSetResponderCapture={(evt) => {
          // 拦截所有横向滑动手势
          return Math.abs(evt.nativeEvent.deltaX) > Math.abs(evt.nativeEvent.deltaY);
        }}
        style={{flex: 1, backgroundColor: '#fff'}}
      >
        {/* 抽屉原有业务内容 */}
      </View>
    )
  }
  export default MenuDrawer;
  

内容的提问来源于stack exchange，提问作者Mohamadamin