我正在构建一个带有React Navigation的抽屉,如果用户关闭抽屉,想要执行一些逻辑。在文档中我没有看到任何明显的东西可以让我做到这一点。有没有人知道一种方法来做到这一点?React导航抽屉的状态? (打开或关闭)
回答
唔看不出太多。一种方法是控制使用手动抽屉的开启/关闭:
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
这样,你可以用你的关闭/打开事件的功能中,你可以做任何你打开/关闭前想。
我在他们的文档中看到的唯一其他可能的解决方案是使用自定义contentComponent
。你可以将一个函数传递给onItemPress(route)
事件,所以也许你可以试试这个。
非问题是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);
};
根据@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
没有终极版集成可使用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} />
);
}
- 1. 导航抽屉状态栏
- 2. 导航抽屉打开和关闭太慢
- 3. 导航抽屉需要时间打开和关闭
- 4. React导航抽屉位置
- 5. 导航抽屉关闭不动画
- 6. 关闭导航抽屉箭头动画
- 7. 关闭Xamarin表单导航抽屉
- 8. 在Android中打开或关闭片段时,导航抽屉会滞后Android
- 9. 项目导航抽屉打开活动
- 10. 无法打开抽屉式导航
- 11. 导航抽屉缓慢打开
- 12. Android导航抽屉?
- 13. Android外包导航抽屉
- 14. 导航抽屉在某些设备上打开/关闭时挂起
- 15. 是否有可能像导航抽屉一样打开和关闭片段
- 16. 导航抽屉与导航抽屉片段
- 17. 导航抽屉切换不会改变状态
- 18. Android GPS打开或关闭状态
- 19. 抽屉导航和片段?
- 20. 的Android弧导航抽屉
- 21. Android FLAG_KEEP_SCREEN_ON Fragment导航抽屉
- 22. 动态添加MDL导航抽屉
- 23. 如何关闭适配器类中的导航抽屉
- 24. 导航抽屉关闭空的空间点击
- 25. 我的导航点击菜单项后抽屉不关闭?
- 26. 在导航抽屉中导航错误?
- 27. Android - 抽屉布局 - 关闭抽屉导致空指针异常
- 28. 如何降低导航抽屉在Android导航抽屉中打开时的高度?
- 29. 导航抽屉上的深色调状态栏
- 30. Web应用程序的导航抽屉
你找到任何解决方案,这些作品对我来说 –