问题标签 [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.
javascript - 反应本机抽屉导航器未打开
我正在构建一个反应原生应用程序并使用反应导航 v6 库。我已经构建了一个反应导航器,它在大多数情况下都可以正常工作,但是在导航到某个页面时我遇到了这个错误。
我有一个堆栈导航器:
和抽屉导航器:
导航到 CocktailDetailScreen 时会出现问题,问题是抽屉无法打开。抽屉从标题组件(由 CocktailDetailScreen、homeScreen 和抽屉内的所有屏幕共享)打开并打开它,我正在使用navigation.dispatch(DrawerActions.toggleDrawer())
. 这在除此之外的每个屏幕上都可以正常工作。
我想如果我从堆栈导航器中删除 CocktailDetailScreen 并将其添加到抽屉导航器中,那么抽屉会正常打开。但我不希望这样,因为这个页面只能通过其他屏幕访问,而不是直接从“菜单”/导航器访问。
我确信这是可能的,但我不明白我做错了什么。也许我没有正确嵌套导航器,或者屏幕根本不应该在导航器中?
javascript - 如何在反应导航 6 中分别处理两个抽屉?
我创建了两个抽屉导航器
创建了用于获取抽屉内容的单独组件。
现在如何将这两个抽屉包装在一个导航器中以及如何分别打开这些抽屉(在第一个按钮单击时打开一个抽屉,在第二个按钮单击时打开第二个抽屉)
如果您需要任何其他详细信息,请在评论部分询问。
reactjs - 条件嵌套导航器给出错误“导航器只能包含'屏幕','组'或'React.Fragment'作为其直接子级(找到'')
我有一个“节目”屏幕,其中包含节目列表,单击转到节目详细信息页面。在详细信息页面上,它有 3 个选项卡,但如果 feedurl 为空,则隐藏一个。当导航到具有 feedurl 的各种节目然后没有 feedsurl 时,这会引发错误:
我猜你不能有条件标签渲染?
react-native - React Navigation Authentication Flow:任何导航器都未处理带有有效负载 {"name":"HomeScreen"} 的操作“NAVIGATE”
这里是 React Native 的初学者,试图将此文档与 AWS Amplify Authentication 结合以实现 React Navigation Authentication Flow,但我似乎无法弄清楚出了什么问题。每当我单击登录按钮时,都会 出现此错误。
导航代码(不包括进口):
LoginScreen.js
代码片段:
我知道我不应该使用手动导航navigation.navigate()
,而是有条件地定义屏幕。但是每当我navigation.navigate("HomeScreen");
从代码中删除时,当我按下登录按钮时什么都没有发生。所以我认为我的代码中的条件有问题NavigationGeneral
,我似乎无法找出问题所在。
一些帮助或其他提示将不胜感激,在此先感谢。如果需要更多信息,请告诉我。
react-native - 在 React Navigation 6 中的 ScrollView 内渲染标题
我正在使用 React Navigation v6,我需要在 ScrollView 中呈现我的标题。这将允许我在用户滚动页面时隐藏标题。我可以将屏幕标题设置为 null 以将其删除,但我不知道如何在我的页面中呈现它。react-navigation 中包含一个 <Header /> 组件,但它需要一些我不知道如何获取的道具。我需要此标头的行为与默认标头完全相同,具有相同的按钮和屏幕选项。可能吗?
reactjs - React Navigation:强制屏幕从左到右进行动画处理
使用 React Navigation v6.x 并使用该.navigate()
功能,新视图总是从右到左动画。
通常这很好,但我有几个视图,我总是想从左边加载。
我试图阅读与转换相关的文档、代码示例和 stackoverflow 线程,但我无法收集到任何有用的信息。
任何人都可以给我一些指示吗?
干杯
reactjs - react导航中如何支持不同版本的深度链接
我想支持不同版本的深度链接,以防架构发生变化,我想保留旧版本应用程序的向后兼容性,如何使用 React Native 和 React Navigation 实现这一点?
typescript - 在没有导航道具的情况下导航 - 打字稿打字
我正在尝试将 React Navigation 6.x 包含到带有 Redux 的 React Native 项目中,因此需要能够从外部组件访问导航器。
我正在遵循本指南(在没有导航道具的情况下进行导航)并且具有与示例中基本相同的代码,在功能上运行良好:
但是我也在使用 Typescript。
React Navigation 还有一个关于集成 Typescript 的指南(使用 TypeScript 进行类型检查),它展示了如何键入导航 ref 本身,它也可以正常工作:
虽然没有键入navigate
函数的示例,但我无法得到任何工作。
我认为解决方案是复制navigationRef.navigate()
方法的类型(在此处定义)并将其简单地应用于包装函数:
不幸的是,这给出了以下错误:
typescript - React Navigation 6.x 嵌套道具类型
我一直在查看有关类型检查导航屏幕道具的文档,但似乎无法弄清楚如何在给定嵌套导航结构的情况下编写我的 types.ts 文件(如下所示)。任何帮助将非常感激。
导航结构:
- 根堆栈
- 登录屏幕
- 未找到屏幕
- 主堆栈
- 库选项卡
- 我的节目
- 朋友详情
- 显示详细资料
- 探索标签
- 搜索
- 朋友详情
- 显示详细资料
- 朋友标签
- 朋友们
- 朋友详情
- 显示详细资料
- 库选项卡
我的导航文件:
为简单起见,假设如果一个组件没有在上面显示,它看起来像这样:
我当前的 types.ts 文件(我需要帮助):