React导航抽屉的状态？（打开或关闭）

我正在构建一个带有React Navigation的抽屉，如果用户关闭抽屉，想要执行一些逻辑。在文档中我没有看到任何明显的东西可以让我做到这一点。有没有人知道一种方法来做到这一点？React导航抽屉的状态？（打开或关闭）

2017-06-15 callmetwan

你找到任何解决方案，这些作品对我来说 –

唔看不出太多。一种方法是控制使用手动抽屉的开启/关闭：

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

这样，你可以用你的关闭/打开事件的功能中，你可以做任何你打开/关闭前想。

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

来源

2017-06-15 19:13:32

非问题是DrawerNavigator处理水龙头本身抽屉外面，所以我呼吁手动导航将被绕过。 contentComponent会工作，如果我需要做些事情时，这些项目被按下。实际上，我试图在抽屉打开时隐藏状态栏。 – callmetwan

嗯，是的，我很惊讶他们没有内置的事件。一个肮脏/笨拙的方法是只使用vanilla JS将一个单击事件监听器附加到抽屉切换。只需将它放在DrawerNavigator所在组件的'componentDidMount'生命周期方法中即可。所以每次用户点击打开抽屉时，都会触发您自己的事件。 –

我很欣赏这种努力，但问题在于用户关闭抽屉时未打开。我无法捕捉到该事件。 – callmetwan

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

来源

2017-07-15 14:49:29 ufxmeng

根据@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

来源

2017-08-18 15:06:31 Stophface

没有终极版集成可使用onNavigationStateChange在路由器组件上。只是拦截抽屉动作：抽屉打开和抽屉关闭。

例子：

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

来源

2017-08-28 14:56:27

React导航抽屉的状态？ （打开或关闭）

回答

相关问题

React导航抽屉的状态？（打开或关闭）