问题标签 [tabnavigator]

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 回答
249 浏览

javascript - 条件渲染 vs TabNavigator

案例是我有三个屏幕,显示从 API 获取的结果,并允许用户对这些结果调度操作。这些动作触发(应该)导致其他两个屏幕。换句话说,如果用户在任何屏幕上并执行了一些操作,那么其他两个屏幕应该更新。

例如,屏幕 A、B 和 C。我可以执行以下两种方法之一:

- 条件渲染:

- 三个屏幕的 TabNavigator:

第一种方法的问题在于:

  • 如果用户切换屏幕,即使用户没有在任何屏幕上发送任何操作,应用程序也会获取并使用网络

第二种方法的问题在于:

  • 其他选项卡不会在任何调度的操作上更新(tabNavigator 为所有屏幕呈现一次,仅此而已)

如何结合这两种方法并拥有干净的代码和最新的屏幕?

0 投票
1 回答
770 浏览

javascript - 当 TabNavigator 在屏幕顶部时,如何在其上方添加标题?

我在 TabNavigator 下有 3 个屏幕。TabNavigator 模式是top(选项卡位于屏幕顶部而不是bottom

我想在标签之前放一个标题。

目前我在所有屏幕上的渲染中使用此代码在选项卡下方显示标题,然后屏幕的内容如下:

我怎样才能做到这一点?

0 投票
3 回答
13591 浏览

react-native - 使用动态选项卡创建 TabNavigator

我相对确定我发现这是不可能的,但我想确保没有办法。

有问题的应用程序以 AppNavigator 开始StackNavigator

到目前为止一切顺利,只是DynamicTabBar在用户登录之前不应该“渲染”(即从导航LoginMain)。

这就是为什么

...Account.User.CanEnter ? {始终为 false,因为在用户登录并填充TabNavigator之前呈现。Account一次失败的尝试,它接缝了。

我想在Tabs里面填充componentWillMount,但是我不能设置静态路由器:DynamicTabBar.router = Tabs.router;

有想法该怎么解决这个吗?

0 投票
1 回答
1309 浏览

react-native - React-Navigation 抽屉和静态选项卡导航

我正在从 react navigator 切换到 react-navigation,我实际上对这种方法很好,但在一个问题上苦苦挣扎。

我想使用抽屉导航和底部对齐的选项卡导航。这部分按预期工作 - 这里没有问题。

我希望使用 3 个按钮修复选项卡式导航,这些按钮将在整个应用程序中具有相同的操作。(例如仪表板/搜索/收藏夹)

从仪表板,您可以更深入地导航一个级别。正如我现在所做的那样,选项卡的标签以前“仪表板”更改为导航到项目的名称。

为了澄清,我在 Dashboard-Screen-Tab 中添加了一个堆栈导航,以便用户可以浏览这些页面。

在标签的堆栈中导航时,如何防止标签的标签和操作发生变化?基本上我想在每个屏幕上都有一个固定的标签导航。

我应该创建一个固定的视图组件来实现吗?

这是我的设置:App.js

机器导航器

0 投票
0 回答
358 浏览

android - 屏幕中间的反应导航选项卡

我在我的 react-native 项目中使用 react-navigation 并且我希望在我的屏幕中间的选项卡导航器默认它给出顶部或底部位置。

这可以通过任何方式完成提前谢谢。

0 投票
1 回答
1589 浏览

react-native - 如何在使用 redux 的反应导航选项卡导航器中重定向到登录屏幕

我试图弄清楚如何进行编码。我使用 React Navigation TabNavigator 作为我的主要导航器,并且还使用 Redux 来管理我的应用程序和用户的身份验证状态。

其中一个选项卡的内容只有在用户登录时才能显示,所以我想做的是当他们按下该选项卡时,如果他们尚未登录,我想重定向到或在顶部弹出一个模式带有登录/注册屏幕。在他们成功登录并下拉他们的内容后,我想在他们最初尝试查看的选项卡中显示屏幕。那么你会怎么做呢?

根据我对 TabNavigator 的理解,在初始加载之后,每次单击该选项卡时 componentWillMount 都不会运行,因此我无法在那里检查我的身份验证状态并做出反应。

有没有办法以其他方式拦截选项卡按下并能够在加载该选项卡的视图之前从那里检查我的身份验证状态?

0 投票
1 回答
696 浏览

reactjs - 将道具传递给嵌套的 Tabnavigator

我现在正在使用 react native 3 个月,我现在有几天这个问题没有任何解决方案。

问题:我在 StackNavigator 中有一个嵌套的 TabNavigator。这两个导航器都在无状态组件内:

组件的调用:

如何将条件从我的类传递MainApp到组件内的条件变量MyNavStack以进行条件渲染?所以 Tab4 只有在 CONDITION 为真时才会被渲染。

第二个问题是:我如何将班级MainApp中的道具传递给例如第一个选项卡屏幕?

提前致谢!

0 投票
2 回答
13614 浏览

reactjs - 在 TabNavigator 中隐藏标签 - ReactNavigation

如何隐藏标签TabNavigator并仅显示icons?如果我执行以下操作:

title如果我从中删除navigationOptions它会显示选项卡(HomeSearch)的名称。我只想显示图标并更改活动的颜色iconactiveTintColor不适用于图标。

0 投票
1 回答
2428 浏览

react-native - 如何隐藏反应导航的 TabNavigator 的标题我只想显示图标

在屏幕内部,我设法通过将其设置为空来隐藏标题,如下所示

但是对于每个屏幕我都必须将标题设置为空我想知道是否有任何属性可以默认隐藏标题并且只显示图标?

0 投票
6 回答
20721 浏览

react-native - TabNavigator 额外填充

如何设置 TabNavigator 选项卡的高度和内边距?我正在执行以下操作:

在此处输入图像描述

如何摆脱图标和标签之间的填充?我做过padding:0iconStyle也做过,tabStyle但没有运气。我也不想在下面填充label。我怎么做?谢谢。

发现额外的填充是由以下原因引起的View在此处输入图像描述

我该如何摆脱它?