问题标签 [react-navigation]

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 投票
4 回答
21086 浏览

react-native - 如何使用 TabNavigation 在反应导航中显示标题

我注意到 StackNavigation 中的视图显示标题标题,但如果我在 TabNavigation 中设置相同的屏幕,它不会显示标题。如果我将 StackNavigation 包裹在每个选项卡周围,或者将 TabNavigation 嵌套在 StackNavigation 中,它只会显示标题。

为什么 TabNavigation 中的屏幕不显示标题 - 这是预期的行为吗?如果是这样,最好在每个选项卡中都有一个 StackNavigation,还是在 TabNavigation 周围有一个大的 StackNavigation?

// 标签导航不会在每个屏幕中显示标题标题

当我将它包装在 StackNavigator 中时显示标题

或者这样做更好

0 投票
5 回答
8704 浏览

react-native - 如何从 react-navigation Header 调用 Screen / Component 类方法

我需要从 React Navigation Header 调用 SearchScreen 类方法。

导航器如下所示:

0 投票
5 回答
6993 浏览

javascript - React-Navigation:无法使用嵌套导航器隐藏标题

我正在使用官方的react-navigation来处理我的导航。我有一个用于整个应用程序的主 TabNavigator,有两个选项卡(称为HitchhikingMapNavigatorSettingsNavigator下面),每个选项卡都有一个嵌套的 StackNavigator:

如您所见,即使在我看来,我也将标题的可见性设置为 false HitchhikingMapViewContainer

然而,标题栏仍然可见:

截屏

如果我不嵌套导航器(即,如果我放置此代码,则跳过嵌套的):

然后标题被正确隐藏。

所以结论:当我有两个嵌套导航器时,我不能使标题不可见。有任何想法吗?

0 投票
6 回答
16760 浏览

react-native - 如何使用 React Navigation 使 TabNavigator 按钮推送模态屏幕

使用 React Navigation 选项卡导航器https://reactnavigation.org/docs/navigators/tab如何使其中一个选项卡按钮将屏幕向上推为全屏模式?我看到堆栈导航器有一个mode=modal选项。TakePhoto单击选项卡按钮时如何使用该模式?当前单击它仍会在底部显示标签栏。

0 投票
1 回答
5380 浏览

react-native - 在 react-navigation 中,routeName 和 key 有什么区别?

有点令人困惑的一件事是路由名称和密钥之间的区别以及为什么要使用一个与另一个。以及如何处理重复的路线名称。

该文档说您用于routeName导航到屏幕,这key是“用于对路线进行排序的唯一标识符”。这意味着什么?

似乎路由名称不必是唯一的,如我的示例所示,因为外部选项卡和内部堆栈都具有相同的路由名称。当您使用导航功能时 - 您传递了路线名称,对吗?如果是这样,它如何区分嵌套导航器中的重复路由名称以及何时使用该键?

该文档有一个设置密钥的示例,但我无法理解它试图做什么的上下文,或者你为什么要在实际用例中这样做。

0 投票
1 回答
6493 浏览

react-native - navigation.dispatch 在 reactnavigation 中未定义

我正在使用 reactnavigation 和 redux 创建一个 react-native 应用程序。

在加载应用程序时,我从 NavContainer 收到以下警告:Warning: Failed prop type: The prop 'navigation.dispatch' is marked as required in 'CardStack', but its value is 'undefined'

当我尝试通过导航导航页面时,这会导致错误,this.props.navigation.navigate('Station');因为 navigation.dispatch 不是函数

该应用程序有一个 NavContainer ,我猜它缺少一些东西,因为在渲染函数中未定义调度:

0 投票
2 回答
1693 浏览

reactjs - 如何在 react 或 react native 中实现多步登录

我想在 react 和 react-native 中实现一个多步骤登录,类似于 slack(它首先询问域名,然后是电子邮件,然后是密码)。

我想知道这样做的最佳做法是什么?

我应该使用像 ReactNavigation https://github.com/react-community/react-navigation这样的路由器/导航解决方案吗?

0 投票
0 回答
957 浏览

reactjs - React-Navigation 自定义 TabNavigation 组件隐藏标题

TLDR:我可以自定义传递给const TabNav = TabNavigator({});的视图吗?,或者有没有办法在使用createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView)) 创建选项卡导航器时显示嵌套堆栈导航器的标题;

我正在尝试构建一个自定义视图组件来替换标准选项卡栏视图(基于浮动操作按钮)。

我查看了 StacksInTabs 示例,该示例效果很好,但我没有看到自定义选项卡视图的方法。

遵循文档中的 CustomTabs 示例时,我无法让嵌套的 StackNavigator 显示标题。

当您通过将路由器对象和视图对象传递给 createNavigationContainer 手动创建 TabNavigator 时,肯定会有所不同,但我不知道是什么。

以下是 rnplay.org 上的几个示例:

使用默认导航创建功能:https : //rnplay.org/apps/n0ixXw 编写我自己的标签导航器:https ://rnplay.org/apps/tzTecA

由于需要外部模块导入,它们不能在站点上运行,但这是我的 package.json

0 投票
7 回答
14904 浏览

android - React Navigation:Android 的 StackNavigator 转换

我正在使用这个库https://reactnavigation.org/docs/intro/通过 react-native 构建 android。我可以在 android 设备上进行导航,但是如何让屏幕从右侧滑入并从左侧淡入。似乎这种行为发生在 iOS 设备上,而不是在 Android 上。android应用程序是否有任何动画配置?

请看下面的动画。这是在 iOS 中记录的。

在此处输入图像描述

0 投票
1 回答
17256 浏览

react-native - 在 React-Navigation 中为 Tabnavigator 设置 backgroundColor 和 Badge

在带有 React-Navigation 的 React-Native 中,我有一个 Tabnavigator,如下所示:

现在我想做两件事:

  1. 设置背景颜色:Android 中选项卡的“红色”(不是 iOS 底部选项卡)
  2. 在 Tab1 旁边有一个徽章:例如

表 1 (2) | Tab2 | Tab3

问候