React Navigation抽屉的状态？ （开放或关闭）

Question

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

Answer 1

您需要自定义导航操作来捕获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);
};

Answer 2

根据@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.md和https://github.com/aksonov/react-native-router-flux/issues/699

Answer 3

这适用于使用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);
};

Answer 4

使用“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);
};

Answer 5

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

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

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

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

Answer 6

基于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中“必须拥有”简单直接的方式

Answer 7

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

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

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

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

Answer 8

如果没有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} />
    );
  }

Answer 9

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

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

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）来发现它;