问题标签 [react-navigation-bottom-tab]

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 投票
3 回答
1016 浏览

react-native - 如何重置bottomTabNavigayor内选项卡更改的堆栈?

小吃

我的选项卡中有bottomTabNavigator,每个选项卡内都有堆栈。每当我单击另一个选项卡时,我都想重置堆栈。

选项卡导航器-

选项卡 1 - |_堆栈导航器

选项卡 2 - |_堆栈导航器

选项卡 3 - |_堆栈导航器

目前的情况是,。假设我在选项卡 1 上 - 我从 screen 1 导航到 Screen 2 。然后我点击 Tab 2 。现在,如果我再次单击选项卡 1,将显示屏幕 2 而不是屏幕 1。

每个选项卡上都发生了类似的事情。

我想在每个选项卡单击时重置选项卡。

请帮忙。

我在用 -

“依赖”:{“@react-native-community/cli”:“^4.1.0”,“@react-native-community/masked-view”:“^0.1.6”,“@react-navigation/bottom -tabs”:“^5.0.5”,“@react-navigation/native”:“^5.0.5”,“@react-navigation/stack”:“^5.0.5”,“react”:“16.9。 0”、“react-native”:“0.61.5”、“react-native-gesture-handler”:“^1.6.0”、“react-native-gifted-chat”:“^0.13.0”、“ react-native-reanimated": "^1.7.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.0.0-beta.7 ", },

0 投票
3 回答
4113 浏览

react-native - 如何使用 ReactNavigation 5 在选项卡单击时重置选项卡历史记录?

我正在使用 React Navigation5。我有一个选项卡导航器,想清除单击选项卡上的选项卡历史记录。例如,我在选项卡 1 上,然后转到选项卡 2。从选项卡 2,我导航

屏幕1->屏幕2->屏幕3

现在,如果我单击选项卡,它应该会进入初始屏幕(screen1)。但它不起作用,它以错误的方式工作。这是我的代码。

我面临的这段代码中有两个问题。

  1. 当我单击选项卡时,它会转到第一个选项卡,而不是移动到单击选项卡的第一个屏幕。
  2. 当我回到旧选项卡时,该选项卡上的历史记录也不会重置。

任何人都可以帮助我,谢谢。

0 投票
6 回答
26493 浏览

javascript - How to set the background color of Tab.Navigator?

As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image.

The inactiveColor and activeColor are working (white and red respectively).

screenshot

package.json

0 投票
2 回答
1253 浏览

react-native - 如何在 React Native 上动态隐藏 TabNavigator

所以我有一个带有 react native navigator 的应用程序,我的应用程序计划是在用户第一次启动应用程序时显示一个教程,我使用react-copilot,它真的很棒,但问题是,React copilot 需要是时候启动了,它在 react-navigator 之前启动。

问题是用户可以单击导航器从而破坏教程甚至使系统崩溃,因为教程没有正确启动。

我计划在教程尚未开始时动态禁用导航器。navigationOptions这是从上的代码片段appNavigation

这是组件上的静态值

它可以工作,但问题是当教程结束并且我将静态值设置为 时true,tabBar 不会出现。有没有办法解决?

先感谢您

编辑:我需要澄清我需要的是在某些活动(在本例中为教程)完成后使标签栏出现和消失在同一页面内,而无需重新加载/导航到同一页面

0 投票
0 回答
1471 浏览

performance - react-navigation BottomTabNavigator 在某些 Android 设备上非常慢

我在 Expo 中运行了一个最小的测试 ReactNative 测试。2 个屏幕,都只有一个视图中的文本。

这是在 MBP 上运行的,并通过 QR 码在我的 Android 设备(Note10+)上进行了测试。

它不仅速度慢,而且大部分时间都没有响应,当它确实导航到点击标签时,它要么是即时的(很少),要么需要 5-10 秒。但通常什么都不会发生。

没有显示错误,用 Stack 或 Drawer 替换相同的代码可以正常工作。

2个基本画面:

应用程序代码(减去导入):

我以前从未使用过 Expo,但我无法想象这是正常行为,但看不出它工作如此糟糕的原因。

编辑:我发现其他要测试的设备和选项卡在 iPad4、Galaxy9 上都很好,但在 Note10+ 上非常糟糕。

富有的

0 投票
1 回答
399 浏览

javascript - 我怎样才能让我的材料底部标签可见?

如何使我的材料底部标签导航可见?我有代码并且根据我必须放置函数的持续时间,但是每次我将此代码添加到我的代码中时,Expo 都会给我错误:

);

}

我的代码:


每次我尝试在我的代码中实现它时都会发生这种情况

15:03 SyntaxError: C:\Users\nicol\Documents\GitHub\proyectox-app\node_modules@react-navigation\material-bottom-tabs\src\index.tsx:意外令牌 (14:12)

12 | * 类型 13 | */

14 | 出口类型 { | ^ 15 | MaterialBottomTabNavigationOptions, 16 | MaterialBottomTabNavigationProp, 17 | } 来自 './types'; 错误 15:03 构建 JavaScript 包:错误

0 投票
1 回答
917 浏览

react-native - 从 react-redux 传递 Props 到 React Native 底部标签导航

我正在努力解决

我想将我的 cartItems 的值从 react redux 传递到底部导航图标,但我无法从任何地方传递道具。这是我的代码,

在 BottomTabNavigation 中显示的静态 4 值的图像

0 投票
4 回答
1814 浏览

react-navigation - @react-navigation/bottom-tabs 5.x 引起的启动错误

从之前的 5.x 升级到最新的 @react-navigation/stack 5.2.10 后。App (react native 0.61.5) 启动有错误:

这是部分package.json

升级后有人看到错误吗?有什么想法可以解决吗?

0 投票
1 回答
692 浏览

react-native - 如何在 react-native 的材料底部选项卡中增加一个图标和另一个图标之间的空间

@react-navigation/material-bottom-tabs在我的 react-native 应用程序中使用。如何增加图标之间的空间并根据设备的宽度平均对齐它们。

react-native: 0.62.1 @react-navigation/native: ^5.1.5 @react-navigation/material-bottom-tabs: ^5.1.8

当前行为

底部标签栏的右侧和左侧留有更多空间,我无法在图标之间平均对齐空间。样本

预期行为

我正在使用材料底部选项卡,我想增加材料底部选项卡中的一个图标和另一个图标之间的空间(或)平均对齐图标空间。

在此处输入图像描述

0 投票
2 回答
1914 浏览

react-native - 如何在反应原生的嵌套堆栈导航器中隐藏材料底部选项卡导航器

我正在使用材料底部选项卡导航器,我的应用程序的结构是,一些选项卡包含一个堆栈导航器。当用户导航到堆栈导航器中的另一个堆栈时,我想隐藏底部选项卡。我正在使用反应导航 v5。我不希望底部选项卡显示用户已经导航到堆栈的时间。