如何使用 React Navigation Drawer 切换屏幕

Posted 2023-02-21

【中文标题】如何使用 React Navigation Drawer 切换屏幕

【英文标题】：How to switch screens using React Navigation Drawer

【发布时间】：2020-04-20 12:48:11

【问题描述】：

我有以下导航结构：

App Navigator（切换导航器） 身份验证屏幕（堆栈导航器） 主页（标签导航器） 饲料 其他 配置文件（包含抽屉） 设置、法律信息等

抽屉内容示例

设置（在标签导航器之外导航到屏幕） 通知和声音

如何通过抽屉添加标签并导航到“设置、法律信息”？ 额外：“个人资料”标签不应显示在抽屉上。

一个类似的例子是个人资料标签中的 Instagram 抽屉。当您选择一个选项时，它会推送一个新屏幕。

提前致谢。

【问题讨论】：

您需要的是导航操作。如果你了解 Redux，你就会知道它是如何工作的。 reactnavigation.org/docs/en/navigation-actions.html

考虑到我的项目规模，Redux 有点矫枉过正。还有什么办法吗？

你不需要实现redux。导航操作在底层使用 redux

【参考方案1】：

我想出了笨重但有效的解决方案。

抽屉导航路线

`...
// 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
        
    />
)
...
`

差不多就是这样。如果您有其他解决方案，请发布。