问题标签 [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.

0 投票
2 回答
78 浏览

react-native - 如何使用自己的导航堆栈关闭模态打开的窗口?

我的 React Native 项目中有以下结构,由这个答案建议:

目前,我想从设置屏幕返回登录屏幕。

  • 我尝试了这个问题下的解决方案,但没有奏效。

  • 我还尝试使用DeviceEventEmitter向登录屏幕发送事件来调用 navigation.popToTop() 或 navigation.goBack() - 这也不起作用。

0 投票
0 回答
36 浏览

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,但概念保持不变)。

这是一个写得很糟糕的导航结构吗?感觉它打破了很多好的编码规则……(目前的项目结构)

0 投票
0 回答
21 浏览

javascript - 导航到不同的屏幕或组件时屏幕冻结/卡住

我有这个屏幕,我从 API 获取数据(作为图像 URL)并将其显示为画廊。该应用程序正常工作,但我从这个图库中选择了一张图片。一些屏幕/组件被冻结/卡住。

该应用程序不会崩溃或记录任何错误,只是屏幕被冻结。

我认为这个问题与反应导航有关。

查看以下视频以供参考。

在此处输入图像描述

如果其他人遇到这样的事情,请告诉我

0 投票
1 回答
33 浏览

react-native - 防止 React Native Navigation 中的屏幕模糊

React Navigation 库为我提供了blur事件,当聚焦的屏幕将不聚焦时触发。伟大的。

但是如果我需要通过阻止用户离开这个屏幕来防止模糊动作本身呢?文档只提到了“beforeRemove”事件,那是另外一回事。

有没有办法使用屏幕组件逻辑阻止用户离开屏幕?

0 投票
0 回答
28 浏览

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?

0 投票
1 回答
11 浏览

react-native - 导航到后续屏幕 React Navigation 6 / React Native

谁能告诉我我在下面做错了什么:

我在 App.js 中有这个(当然是删减了):

现在,当我从 Home 转到 Groups 然后尝试打电话时navigation.navigate("GroupDetail");

我收到此错误:任何导航器都未处理带有有效负载 {"name":"GroupDetail"} 的操作 'NAVIGATE'。

当然,我确实有那个屏幕并检查了进口。

我在这里想念什么?我只需要从Home, 到Groups然后 推到Group Detail

我已经尝试过 Nested Navigator 文档,但我认为它适用于此处(无论如何都没有用)。

0 投票
1 回答
24 浏览

javascript - 如何在 bottomTabNavigator 上添加一个按钮,而不是在 react native 中导航到屏幕?

我正在使用 react-navigation 6。我的要求是在底部选项卡中添加一个注销按钮,我有一个 bottomTabNavigator。因此,我想在底部选项卡上添加该按钮,以便一旦按下该按钮,用户就会退出。有没有办法做到这一点?

0 投票
0 回答
5 浏览

react-native - 键入一个嵌套导航器,该导航器接收一个 params 属性并在反应导航中具有屏幕

哪个是键入嵌套导航器的最佳方法,该导航器将接收一个params属性,并且在反应导航 v6 中仍然会有屏幕?结构会怎样?

0 投票
1 回答
22 浏览

react-native - 如何在反应导航中覆盖可访问性角色

我想开始将我的 react-navigation 依赖项从 5.X 版更新到 6.x 版,但我遇到了关于在其底部标签栏的代码库中硬编码的可访问性设置的问题。

在他们BottomTabBar.tsx的视图中,他们的视图如下所示

这会导致以下错误

这是我收到的错误

这让我觉得这是图书馆的一个错误,但不知何故,我无法在世博小吃中重现同样的问题。更改“按钮”之类的其他值可以解决问题,但我不喜欢在 node_modules 中搞乱。另一种解决方案是覆盖选项卡栏并编写一个自定义实现(我在不太担心样式的情况下尝试过这个)但是对于看起来很简单的事情来说,这种开销很大

0 投票
2 回答
23 浏览

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