问题标签 [react-navigation-v5]

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 投票
1 回答
824 浏览

react-navigation - 如何使用反应导航删除双标头?

我的 React Native 0.61.5 使用react-navigation 5.1. 这是根导航代码:

该组件AppScreen返回一个这样的堆栈:

我注意到屏幕上有双标题:

在此处输入图像描述

如何删除App标题并仅保留Group?

0 投票
0 回答
313 浏览

react-native - 选项卡导航器屏幕上的 IntialParams 未定义(反应导航 v5)

我正在尝试将 initialParam 道具传递给 TabNavigator 屏幕。它旨在成为本地状态的登录部分,只是进行概念验证。它适用于堆栈导航器屏幕,但route.params选项卡屏幕上的未定义。我究竟做错了什么?

另外,我很确定就状态管理而言这将不得不改变,但我想确保我可以简单地更改父级中的状态App并使其生效。它适用于堆栈屏幕,这意味着我可以调用setLoggedIn(true)它并将我带到选项卡导航器。可我回不去了……

0 投票
2 回答
4383 浏览

react-native - 如何将应用程序的当前状态传递到选项卡导航屏幕

如果我使用的是 React Navigation v5,将父组件(在我的情况下是主应用程序)的当前状态通过选项卡和堆栈导航器向下传递到我想使用的屏幕的最佳方法是什么目前处于什么状态?

根据文档,我为每个包含相应屏幕的选项卡创建了一个堆栈导航器。

App.js 包含一个需要用于一些事情的状态。最重要的是,它将在选项卡导航器上提供徽章计数,并成为其中一个选项卡屏幕上的平面列表数据的来源。

将状态从 App 一直到选项卡导航器中堆栈导航器中的子组件的正确方法是什么?

应用程序.js

NearbyStack.js

NearbyScreen.js

0 投票
1 回答
22 浏览

react-navigation - ReactNative 导航 5 - 如何获取 `navigation.state.params`(从 1.x 升级)

尝试将旧的反应导航 1.x 更新到当前版本 5.x。navigation.state.params我需要根据1.x 版本中使用的值显示不同的选项卡图标。该值是使用 navigation.dispatch(data) 在其中一个屏幕中设置的。

这是与导航 1.x 一起使用的简化代码:

需要如何更改才能使用 React 导航 v.5.x?还是我能做的就是使用 React.Context?

0 投票
0 回答
282 浏览

react-native - 如何在 React-Navigation v5 中从嵌套的 BottomTabNavigator 导航到父 StackNavigator?


我在使用 React-Navigation v5BottomTabNavigator嵌套在StackNavigatorReact-Native 中时遇到问题

这是我的StackNavigator

AircraftList用户中,用户可以按下Aircraft,并在其中导航,前往MainTabNavigator他可以看到飞机详细信息的地方,底部栏可以在它们之间导航。

在这一步中,我使用命令

这是我的MainTabNavigator

每一个Tab.Screen都是StackNavigator

一切都很好,除了一个问题,我无法返回AircraftList,事实上,如果我在打开时按下设备返回按钮SortiesNavigator,我会收到 development-only 错误

“任何导航器都没有处理‘GO_BACK’操作”

你有什么建议吗?

0 投票
1 回答
856 浏览

react-native - 反应导航 v5 从抽屉自定义视图导航

我正在使用 React Navigation V5,我想要自定义抽屉导航内容,其中包含顶部的图像和其他一些导航项

这是我的抽屉里的物品:

  • 图片(自定义视图)
  • 轮廓
  • 产品
  • 订单

这是我的自定义抽屉内容的代码。

因此,如果配置文件屏幕存在于抽屉中,通过单击图像我可以使用

但是,如果我从抽屉屏幕中删除配置文件屏幕。我无法导航到个人资料了。我如何存档导航到配置文件屏幕而不添加抽屉屏幕?

或者我可以从抽屉项目中隐藏个人资料项目吗?

0 投票
1 回答
811 浏览

reactjs - 监视从 3rd 方库挂钩返回的函数

我无法弄清楚React 导航v5 中钩子navigate返回的函数的热点。useNavigation

我有一个简单的Link组件:

和相应的测试:

当然这不起作用,因为 inconst spy = jest.spyOn(useNavigation, 'navigate'); navigate不是useNavigation. 但是我尝试了无数其他的可能性,我就是不知道该怎么做。

基本上我要做的是验证当链接被按下时,它会调用带有预期参数的预期函数,并且我希望该函数被模拟出来。

0 投票
0 回答
1284 浏览

reactjs - 从父 React Navigation V5 打开子抽屉

我有应用程序设置的主要导航。在这里,我初始化了可以有抽屉、堆栈或选项卡堆栈的路由堆栈。

导航.js

问题是当我尝试从其中一个堆栈更改标题时,我无法更改该堆栈的标题设置,例如:

收集器路由.js

但是,如果我在CollectorRoutes的 scree 上的navigation.js中提供标题选项,那么标题是自定义的。

但是又出现了一个问题,我无法从那里切换抽屉,因为父抽屉堆栈的导航堆栈无法访问。

navigation.js -> 为 DrawerStack (CollectorRoutes) 启用了标头

是否有任何解决方案可以访问父级中的抽屉切换?或者我们可以以某种方式而不是在父级中提供标题选项,而是在子级中配置它?

0 投票
1 回答
787 浏览

react-native - 如何强制 TabBar 在所有 App 屏幕中显示 react-navigation v5?

我正在尝试在我的应用程序的每个屏幕中显示底部 TabBar,但我还找不到在 RN V5 中执行此操作的方法,

所以当我尝试这样使用tabBarVisible

那么我该如何处理这种情况呢?并访问其他堆栈屏幕?

只是为了最小化有问题的代码片段

这是完整的根文件代码,你能检查一下吗?

0 投票
1 回答
371 浏览

android - 反应本机导航 v5 android 后退按钮处理程序

我正在使用反应导航 v5,我正在尝试在 routes.js 中创建一个默认的 android 后退按钮处理程序。使用通量有 backAndroidHandler 参数可以让你做到这一点。我的问题是我可以在导航 v5 中使用的东西。

我知道有https://reactnavigation.org/docs/custom-android-back-button-handling/。但问题是我不想去每个屏幕并设置它。

目前的解决方案是这样的:

我的问题是,navigation v5 是否有某种解决方案,就像 Flux 那样?有没有更好的方法来管理android后退按钮?