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 /问题/ 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第825行

但是，由于您没有手动切换，所以似乎说滑动所隐含的抽屉导航不会触发OPEN_/ CLOSE_动作。不过，_OPENED/ _CLOSED动作确实会在之后触发。

{
  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'
}

Answer 4

嗯，确实没看到太多。一种方法是使用以下命令手动控制抽屉的打开/关闭：

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

这样您就可以将关闭/打开事件包装在一个函数中，您可以在打开/关闭之前执行您想要的任何操作。

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