[英]React Native - Stack Navigator inside Drawer Navigator inside Tab Navigator
I have some troubles while mixing different navigators. 混合使用不同的导航器时遇到一些麻烦。 Here is my navigator file : 这是我的导航器文件:
const DrawerNav = DrawerNavigator({
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
})
const TabNav = TabNavigator({
Drawers: { screen: DrawerNav },
Params: { screen: Params },
Search: { screen: Search },
},
{
tabBarPosition: 'bottom',
});
export default StackNavigator({
Home: { screen: TabNav },
}, stackNavigatorConfig);
The problems are when I open the Drawer Navigator : 问题是当我打开抽屉导航器时:
Here is two images with the different states (drawer closed / opened) : 这是两个具有不同状态(抽屉关闭/打开)的图像:
I don't quite understand why you are using a drawer inside a tab. 我不太明白为什么您要在标签内使用抽屉。
In order to be able to navigate through all the app the drawer must be included in the stack: 为了能够浏览所有应用程序,抽屉必须包含在堆栈中:
const TabNav = TabNavigator({
Params: { screen: Params },
Search: { screen: Search },
},
{
tabBarPosition: 'bottom',
}
);
const DrawerNav = DrawerNavigator({
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
TabNav: { screen: TabNav },
})
export default StackNavigator({
Home: { screen: TabNav },
DrawerNav: { screen: DrawerNav }
}, stackNavigatorConfig);
In the other hand, if what you are looking for is to fire the drawer through a click on that tab, you need to hack the tab from the source, or fire a function when that empty screen render that make a call to: 另一方面,如果您要查找的是通过单击该选项卡来触发抽屉,则需要从源中破解该选项卡,或者在该空白屏幕呈现时调用以下功能来触发函数:
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
this.props.navigation.navigate('DrawerToggle'); // fires 'DrawerOpen'/'DrawerClose' accordingly
I hope that help.. 希望有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.