问题标签 [react-navigation-v6]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
react-native - React 导航从 v3 迁移到 v6
我被分配到一个项目,我们需要将 React Navigation 从版本 3 升级到版本 6。查看代码我发现了一些奇怪的东西(或者至少我认为它们很奇怪),该项目包含一个 Switch Navigator 里面有两个 Stak Navigator,如下所示:
然后我有一个 AppNavigatorContainer,就像这个:
和这样的应用程序文件:
所以基本上它将对 AppNavigator 的引用保存在全局文件 (NavigationService) 中,以便可以在任何地方访问它,包括未嵌套在 AppNavigatorContainer 中的菜单和工具栏。工具栏是设置在屏幕底部的工具栏,它根据您是在第一个堆栈还是第二个堆栈中更改按钮。
正如我所看到的,工具栏应该使用 StackNavigator 中的两个 TabNavigators(每个都有一组按钮/选项卡)构建,并且 Menu 应该是 DrawerNavigator(不知道反应导航的版本 3 中是否有这些堆栈),并且应该嵌套在 SwitchNavigator 中(在版本 6 中没有 Switch,但概念保持不变)。
这是一个写得很糟糕的导航结构吗?感觉它打破了很多好的编码规则……(目前的项目结构)
react-native - 防止 React Native Navigation 中的屏幕模糊
React Navigation 库为我提供了blur
事件,当聚焦的屏幕将不聚焦时触发。伟大的。
但是如果我需要通过阻止用户离开这个屏幕来防止模糊动作本身呢?文档只提到了“beforeRemove”事件,那是另外一回事。
有没有办法使用屏幕组件逻辑阻止用户离开屏幕?
react-navigation-v6 - How to make "Go back to initial StackNavigator Screen when TabNavigator's Tab is pressed" in v6
How to make "Go back to initial StackNavigator Screen when TabNavigator's Tab is pressed" in react-navigation v6?
react-native - 导航到后续屏幕 React Navigation 6 / React Native
谁能告诉我我在下面做错了什么:
我在 App.js 中有这个(当然是删减了):
现在,当我从 Home 转到 Groups 然后尝试打电话时navigation.navigate("GroupDetail");
我收到此错误:任何导航器都未处理带有有效负载 {"name":"GroupDetail"} 的操作 'NAVIGATE'。
当然,我确实有那个屏幕并检查了进口。
我在这里想念什么?我只需要从Home
, 到Groups
然后 推到Group Detail
。
我已经尝试过 Nested Navigator 文档,但我认为它适用于此处(无论如何都没有用)。
javascript - 如何在 bottomTabNavigator 上添加一个按钮,而不是在 react native 中导航到屏幕?
我正在使用 react-navigation 6。我的要求是在底部选项卡中添加一个注销按钮,我有一个 bottomTabNavigator。因此,我想在底部选项卡上添加该按钮,以便一旦按下该按钮,用户就会退出。有没有办法做到这一点?
react-native - 键入一个嵌套导航器,该导航器接收一个 params 属性并在反应导航中具有屏幕
哪个是键入嵌套导航器的最佳方法,该导航器将接收一个params
属性,并且在反应导航 v6 中仍然会有屏幕?结构会怎样?
react-native - 为什么即使在反应导航中不满足条件也会加载路线?
在我App.tsx
的设置中,我是这样设置的:
我的导航组件包含根据用户呈现经过身份验证或未经身份验证的路由的逻辑,它包含以下内容:
该Auth
组件有一段BottomTabNavigator
时间NonAuth
是另一个StackNavigator
在 BottomTabNavigator 的屏幕内我有一个设置屏幕,其中有注销按钮,当我单击此按钮时,我将用户设置为 null,但我收到错误消息:null is不是评估 user.role 的对象在 BottomTabNavigator 我正在检查 user.role 以确定要显示的底部选项卡,但是由于用户为 null 为什么它进入 Auth 路由,当我正确登录时,它会自动从 NonAuth 到 Auth因为在登录时我将用户设置为一些数据,但在注销时我将其设置为 null 并且它仍然在 Auth 内部?
这些是我正在使用的版本:
另请注意,NonAuth 是使用@react-navigation/native-stack
Navigation创建的@react-navigation/stack