【问题标题】: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()}

这里有人已经这样做了吗? 有没有办法在全球范围内设置drawerLockModeonDrawerOpenedonDrawerClosed 道具是否存在? 谢谢!

【问题讨论】:

    标签: react-native react-native-navigation react-native-drawer


    【解决方案1】:

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

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

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

    【讨论】:

    • 这有点帮助,但我仍然不知道如何动态更改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 实例的方法,然后使用此库提供的根视图包装器。不要忘记导入ReactActivityDelegateReactRootViewRNGestureHandlerEnabledRootView

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

    【讨论】:

      猜你喜欢
      • 2023-03-24
      • 2018-06-28
      • 2019-12-28
      • 2016-02-14
      • 2022-07-20
      • 2013-05-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多