React Navigation抽屉的状态? (开放或关闭)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Navigation抽屉的状态? (开放或关闭)相关的知识,希望对你有一定的参考价值。

我正在使用React Navigation构建抽屉,并且如果用户关闭抽屉,则想要执行一些逻辑。我没有在文档中看到任何可以让我这样做的明显内容。有人知道这样做的方法吗?

答案

您需要自定义导航操作来捕获DrawerClose事件:

const MyDrawerNavigator = DrawerNavigator({
    //...
});

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {

    //use 'DrawerOpen' to capture drawer open event
    if (state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        console.log('DrawerClose');
        //write the code you want to deal with 'DrawerClose' event
    }
    return defaultGetStateForAction(action, state);
};
另一答案

根据@ufxmeng

import {
  StatusBar,
} from "react-native";

const MyDrawerNavigator = DrawerNavigator({
    //...
});

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {
    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        StatusBar.setHidden(false);
    }

    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerOpen') {
        StatusBar.setHidden(true);
    }


    return defaultGetStateForAction(action, state);
};

在这里查看https://github.com/react-community/react-navigation/blob/673b9d2877d7e84fbfbe2928305ead7e51b04835/docs/api/routers/Routers.mdhttps://github.com/aksonov/react-native-router-flux/issues/699

另一答案

这适用于使用v2.0 +版本的react-navigation的任何人。您现在可以跟踪抽屉动作。

{
  OPEN_DRAWER: 'Navigation/OPEN_DRAWER',
  CLOSE_DRAWER: 'Navigation/CLOSE_DRAWER',
  TOGGLE_DRAWER: 'Navigation/TOGGLE_DRAWER',
  DRAWER_OPENED: 'Navigation/DRAWER_OPENED',
  DRAWER_CLOSED: 'Navigation/DRAWER_CLOSED'
}

react-navigation.js line 825

但是,似乎刷卡的隐含抽屉导航不会触发OPEN_ / CLOSE_动作,因为您没有手动切换它。然而,_OPENED / _CLOSED行动后来开火了。

const MyDrawerNavigator = createDrawerNavigator(...);
const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction;

MyDrawerNavigator.router.getStateForAction = (action, state) => {
  switch (action.type) {
    case 'Navigation/OPEN_DRAWER':
    case 'Navigation/DRAWER_OPENED':
      StatusBar.setHidden(true, 'slide');
      break;
      
    case 'Navigation/CLOSE_DRAWER':
    case 'Navigation/DRAWER_CLOSED':
      StatusBar.setHidden(false, 'slide');
      break;
    }

  return defaultGetStateForAction(action, state);
};
另一答案

使用“react-navigation”:“^ 3.5.1”

const defaultGetStateForAction = DrawerNav.router.getStateForAction;

DrawerNav.router.getStateForAction = (action, state) => {

    if(action){
        if(action.type == 'Navigation/MARK_DRAWER_SETTLING' && action.willShow){   
            StatusBar.setHidden(true);
        } else if(action.type == 'Navigation/MARK_DRAWER_SETTLING' && !action.willShow) {
            StatusBar.setHidden(false);
        }
    }

    return defaultGetStateForAction(action, state);
};

另一答案

我找到了类似于asdfghjklm的东西。

这是我的代码,即使你使用滑动打开 - 然后使用按钮关闭它,它的工作也很完美:

openCloseDrawer = (props) => {
  if (props.navigation.state.index == 1) {
    props.navigation.navigate('DrawerClose');
  } else {
    props.navigation.navigate('DrawerOpen');
  }
}

当用户点击“打开/关闭抽屉”按钮时,我执行此功能。

另一答案

基于Brad Bumbalough,fredrivett(谢谢你)解决方案,我找到了一个更快速的响应解决方案(另一个解决方案在一些用途中延迟了secons)。

const defaultGetStateForAction = StackLogadoDrawer.router.getStateForAction;

StackLogadoDrawer.router.getStateForAction = (action, state) => {
  switch (action.type) {
    case 'Navigation/MARK_DRAWER_SETTLING':
      if (action.willShow == false) {
        console.log('CERRADO');
      } else if (action.willShow == true) {
        console.log('ABIERTO');
      }
      break;
    }

  return defaultGetStateForAction(action, state);
};

这只是在发生动作(或非常接近)时触发。

它适用于手势或调用openDrawer()

无论如何,我认为这是API中“必须拥有”简单直接的方式

另一答案

嗯,并没有真正看到太多。一种方法是使用以下方法手动控制抽屉的打开/关闭:

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

这样你就可以将你的close / open事件包装在一个函数中,你可以在打开/关闭之前做任何你想做的事情。

我在他们的文档中看到的唯一其他可能的解决方案是使用自定义contentComponent。你可以将一个函数传递给onItemPress(route)事件,所以也许你可以尝试挂钩。

另一答案

如果没有Redux集成,可以在路由器组件上使用onNavigationStateChange。只是拦截抽屉动作:DrawerOpen和DrawerClose。

例:

  handleNavigationState = (previous, next, action) => {    
    if (action.routeName === 'DrawerOpen') {
      this.props.setDrawerState(true);
    } else if (action.routeName === 'DrawerClose') {
      this.props.setDrawerState(false);
    }
  }

  render() {
    return (
      <Router onNavigationStateChange={this.handleNavigationState} />
    );
  }
另一答案

我知道这已经很晚了,但对于那些正在寻找答案的人来说:

抽屉打开/关闭的逻辑是:

this.props.navigation.state.routes[0].index

关闭时为0,打开时为1。

您也可以使用切换抽屉

this.props.navigation.navigate('DrawerToggle')

代替

this.props.navigation.navigate('DrawerOpen');

this.props.navigation.navigate('DrawerClose');

对我来说似乎更方便,我还没有遇到任何问题。虽然很高兴知道它们是否被切换以便调用其他动作。

我真的相信React-Navigation是我见过的最糟糕的文档之一。有些命令没人知道。我在文档中找不到DrawerToggle操作,我只是通过使用console.log(this.props.navigation)来发现它;

以上是关于React Navigation抽屉的状态? (开放或关闭)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native Navigation wix V1 中单击时关闭抽屉

react-navigation createDrawerNavigator 抽屉菜单 点击其他地方 无法关闭菜单的解决方案

如何仅在特定屏幕(例如主屏幕)上启用抽屉导航 [react native] [react navigation]

退出抽屉内的子堆栈导航器时,如何使用 react-navigation 进入 initialRoute?

如何在react-navigation V5中添加动态抽屉元素?

如何使用 react-navigation 推送新场景?