react-native从入门到精通搭建app（九）一一标签导航和抽屉导航嵌套使用

追梦猪

于 2019-09-23 10:55:42 发布

阅读量427

点赞数 1

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/qq_38705449/article/details/103525641

版权

react-native 专栏收录该内容

12 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在React Native中将底部标签导航和抽屉导航结合使用，通过createStackNavigator进行嵌套，实现应用的复杂导航结构。示例代码展示了如何配置createDrawerNavigator和createBottomTabNavigator，并提供了相关官方手册链接以获取更多详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

九、标签导航和抽屉导航嵌套使用

前面几个例子我们看到了要不只有底部导航，要不只有侧栏导航，但是怎么让底部导航跟侧栏导航一起使用呢那我们就有点犯难，下面教大家嵌套使用侧栏和底部导航

侧栏导航用的是createDrawerNavigator创建的

底部导航用的是createBottomTabNavigator创建的

单独使用是直接createAppContainer（侧栏或底部）

嵌套使用的话我们要用到createStackNavigator为您的应用提供一种在每个新屏幕都放在堆栈顶部的屏幕之间过渡的方式。

使用createStackNavigator关联侧栏和底部导航

他们直接的关系就是

 var DrawerNavigator =  createDrawerNavigator({}) ;
 var TabNavigator=  createBottomTabNavigator({DrawerNavigator }) ;
 var StackNavigator=  createStackNavigator({TabNavigator}) ;
 var AppContainer=  createAppContainer(StackNavigator);