问题标签 [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 投票
1 回答
139 浏览

react-native - 如何在 React Navigation 6 中的组件内动态设置标题?

尝试title在 React Navigation 6 中动态设置标题,但我不断收到警告消息:

NativeStackNavigator警告:在渲染不同的组件 ( ) 时无法更新组件 ( CategoryMealsScreen)

我的导航器精简了:

我如何title在组件中设置:

根据有关使用更新选项setOptions的文档。完整组件供参考:

研究:

title一切都在我的 Expo 应用程序中正常工作,但我不确定组件是否根据从道具传递的选择来设置类别 ID如果我无法从导航器的堆栈屏幕上设置标题,我该如何动态设置?

0 投票
1 回答
81 浏览

react-native - react-navigation子组件数据到父组件函数[react-navigation 6]

我的 Senario 是我有多个屏幕(CategoriesScreen、CategoryMealsScreen、MealDetailsS​​creen、Favorites Screen)。我想将我的膳食项目外包到一个单独的组件中,并在 CategoryMealsScreen 和收藏夹屏幕中重复使用该组件。

  1. 成分
    • 餐单
    • 膳食项目
  2. 屏幕
    • 分类画面
    • CategoryMealsScreen
    • 用餐详情画面
    • 收藏夹屏幕

第一个用户在 CategoriesScreen 中选择一个类别,然后使用代码

CategoryMealsScreen 接收 categoryId

现在我想从 Parent CategoryMealsScreen.js 导航到子组件。代码是否正确?

然后在 MealList 中导航到 MealDetailsS​​creen

错误:使用对象作为参数调用导航时需要指定名称或键。单击 CategoryMealsScreen 错误后,请参阅https://reactnavigation.org/docs/navigation-actions#navigate以了解用法,并且无法显示 MealDetailsS​​creen。


如果您有任何想法,请分享。

0 投票
1 回答
63 浏览

android - 自升级到 Expo SDK 43 后,屏幕不会在材质底部选项卡导航器上呈现

我有一个博览会项目,它是 SDK v42,一切正常,该应用程序目前正在生产中。但是,在升级到 expo SDK 43 后,在 Material 底部选项卡上传递的堆栈导航器不会呈现,并且只会显示空白屏幕。我使用以下 github 存储库创建了一个虚拟项目:https ://github.com/kamrul91111/sdk ,

在此处输入图像描述

在此处输入图像描述

堆栈导航器中的屏幕传递给材料底部选项卡导航器第一次工作,但是当我转到底部选项卡上的另一个屏幕并返回时,屏幕不再呈现。

可以通过降级到 expo v42 或仅使用底部选项卡导航器而不是材质底部选项卡导航器来解决此问题。这里有什么问题?如何解决这个问题?

0 投票
0 回答
45 浏览

react-native - 用于选项卡导航器的反应导航 v6 上的奇怪历史记录 (goBack) 行为

我做了一个小蛇来解释我在这里的目的

在这个(脏)示例中,我有 4 个屏幕:提要、配置文件、设置和 toto。当我导航时,历史中只剩下两条路线:第一条(供稿)和最后一条(当前路线)。最后一条路由覆盖了 n-1 条路由。

一个例子:尝试从提要 > 个人资料 > 设置导航并返回:我们去提要,但我想在个人资料屏幕上返回。

在我的应用程序中,我有一个更复杂的架构:堆栈>选项卡>堆栈(tab.screen)>屏幕,我遇到了同样的问题。

我怀疑反应导航中有一个错误,因为我不明白为什么状态state.routes[0].state?.history不保持所有通过的路线(查看 LOGS 控制台)。还是我误解了什么?

如果有人有想法:)

谢谢

编辑:在 v5 上,这就像一个魅力:https ://snack.expo.dev/@bug00/5b964c state...history 跟踪访问过的路线。

另请注意,在 V6 上,console.log 在每次导航时调用的次数更多,在 V5 上,每个导航处都有一个 console.log

0 投票
2 回答
197 浏览

react-native - 如何在 React Navigation 中设置标题高度?

似乎除了backgroundColor没有其他东西对headerStyle.

然后我传递选项:

难道我做错了什么?
有没有办法设置标题的高度?
提前致谢。

0 投票
1 回答
115 浏览

react-native - 将 react-navigation 从 v5 升级到 v6 时,是否还应该在顶部导入 react-native-gesture-handler?

react-navigation v5的文档提到了这一点:

要完成 react-native-gesture-handler 的安装,请在您的入口文件(例如 index.js 或 App.js)的顶部添加以下内容(确保它在顶部并且之前没有其他内容)

注意:如果您正在为 Android 或 iOS 构建,请不要跳过此步骤,否则您的应用可能会在生产中崩溃,即使它在开发中运行良好。这不适用于其他平台。

v6 是当前最新的,它没有提到任何地方:https ://reactnavigation.org/docs/getting-started/

它甚至没有说你必须先安装react-native-gesture-handler

并且升级指南没有说你必须删除它:https ://reactnavigation.org/docs/upgrading-from-5.x/

现在我问的原因是因为 v5 文档说你的应用程序可能在生产中崩溃,即使它在开发中工作。那就是如果你不在import 'react-native-gesture-handler'顶部。

我目前处于我的应用程序在开发中工作并在生产中崩溃的情况。我正在使用 v6 的 react-navigation,并且我仍在react-native-gesture-handler顶部导入。这让我想知道这是否与它有关。它是生产应用程序,所以我看不到错误消息,所以我大多只是猜测。我之前只是考虑过这个问题,文档和升级指南没有提到任何内容,而现在我发布了我想知道这是否是导致错误的原因。

0 投票
1 回答
100 浏览

react-native - 如何在 React Navigation 6 的特定屏幕中隐藏 tabBar?

如何在特定屏幕中隐藏标签栏react-navigation 6...而不更改导航结构,因为它是此处文档中唯一可用的选项

0 投票
0 回答
13 浏览

react-navigation - 如何在没有标题的情况下为模态演示的顶部着色

我在presentation设置为modalheaderShownto的屏幕内有一个视图false

现在,视图的背景是白色的,而屏幕顶部的背景是默认的灰色。

截屏

我的问题是,我该如何设计这个灰色部分以使其变为白色。

0 投票
1 回答
77 浏览

reactjs - 从嵌套导航返回时反应导航崩溃

我在我的 React 本机应用程序上使用 React-navigation 6 我在每个堆栈上有两个StackNavigator屏幕BottomStackNavigator和参数:

所以我试图从 PlannerStack 导航到 ProfileStack,当我在 ProfileStack 中时,我想回到 PlannerStack。

我从 PlannerStack 去 ProfileStack 没有问题,如下所示:

所以在那一刻我ProfileStack在屏幕上ProfileAddThings。如果我阅读文档,PlannerStack保留它的历史记录,如果我点击 Planner 的 bottomTab 按钮,我可以看到页面仍然是PlannerDetails. 但是,当我点击屏幕的后退按钮时ProfileAddThings,我会回到ProfileHome。我试图用该代码覆盖屏幕的 backButton 操作ProfileAddThings

但我得到了错误:undefined is not an object (evaluating 'route.params.detail')

细节是PlannerDetails屏幕的一个参数。

我真的不明白为什么这个参数是未定义的,因为 de PlannerStack 历史仍然存在。

有人已经从 react native 中的嵌套导航返回?

谢谢

0 投票
1 回答
98 浏览

javascript - 覆盖 React 导航 SearchBar 以添加分段控件

有没有办法在不编写完全自定义标题的情况下使用搜索栏和分段控件覆盖响应导航中的标题?我想使用反应导航提供的内置搜索组件,但在点击搜索时添加分段控件。还想要iOS中的原生大标题样式。

React 导航有一个选项来指定显示 SearchBar 的搜索选项,但我不确定是否可以覆盖此功能。参考下面的截图:

使用分段控制搜索