javascript - 如何使用 React Navigation Drawer 切换屏幕
问题描述
我有以下导航结构:
- App Navigator(切换导航器)
- 验证屏幕(堆栈导航器)
- 主页(标签导航器)
- 喂养
- 其他
- 配置文件(包含抽屉)
- 设置、法律信息等
示例抽屉内容
- 设置(导航到标签导航器之外的屏幕)
- 通知和声音
如何通过抽屉添加标签并导航到“设置、法律信息”?额外:“个人资料”标签不应显示在抽屉上。
一个类似的例子是个人资料选项卡中的 Instagram 抽屉。当您选择一个选项时,它会推送一个新屏幕。
提前致谢。
解决方案
我想出了笨重但有效的解决方案。
抽屉导航路线
`...
// To hide a specific route (Profile)
HiddenLabel:{
screen:ScreenA,
navOptions:{
drawerLabel:()=>null
}
}
A:{
screen:()=>null
navOptions:{
drawerLabel:'Settings'
}
}
...`
抽屉导航自定义组件
`
...
contentComponent:(props)=>(
// Should be wrapped in SafeAreaView
<DrawerItems {...props} onItemPress={
({route})=>{
// query and use props.navigation to navigate to route.routeName
}
}/>
)
...
`
差不多就是这样。如果您有其他解决方案,请发布。
推荐阅读
- hbase - 无法从 Kerberized HBase 读取
- jenkins - Jenkins 共享库 - 为选项部分创建一个通用函数
- python-3.x - Python。int 条件下的重复错误
- python - 无法在官方 resnet 模型中使用自定义数据集,引发 tensorflow.python.framework.errors_impl.CancelledError
- c# - 需要帮助构建正则表达式
- html - 使用 Bootstrap 4 的导航下拉悬停
- asp.net-mvc - .net core - MVC - 在 Viewmodel 上使用 IEnumerable 返回空模型
- amazon-s3 - 如何使用 Apache Camel 从位于跨账户的 S3 复制文件
- node.js - 没有错误消息,但每次我运行我的代码时,它都会执行并退出
- python - 如何根据值pyspark创建带列