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

react-native - 深色模式下底部选项卡的 SafeArea 颜色无法更改

从昨天开始我就一直陷入这个问题,我找不到解决方案。

我一直在尝试调整 iPhone X 中 safeArea 的颜色,它在顶部和底部以及没有标签的屏幕上运行良好,但是,在带有标签导航器的屏幕中,底部的 safeArea 始终为白色,如图所示截图。有谁知道如何解决这个问题?

另外,我想问一下使用普通的 SafeAreaView 组件并删除 SafeAreaProvider 并删除 react-native-safe-area-context 包是否会更好,我只是将其添加为解决此问题的试用版,但我是第一次使用反应原生的普通 SafeAreaView 组件;

在 App 组件中:

在 CatNavigator 组件中:

在设置选项卡导航器中:

在设置导航器中:

最后在设置屏幕中:

在此处输入图像描述

0 投票
3 回答
6638 浏览

react-native - 错误:未定义无法解析模块`@react-navigation/bottom-tabs`

一直在寻找有关导航错误模块的解决方案。我试过reset-cache,删除nodu_modules,重新安装模块,但仍然无法正常工作。

错误的完整细节

包.json

应用程序.js

0 投票
1 回答
3101 浏览

javascript - 将参数从堆栈导航器传递到选项卡导航器(反应导航 5)

我正在尝试将用户 ID 从登录屏幕传递到作为嵌套选项卡导航器一部分的主屏幕。这是我的应用程序的结构:

每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时,我都会收到一条错误消息,指出它不是一个函数。经过仔细检查,我发现 this.props.navigation.state 是未定义的。可能意味着我的参数没有传递到主屏幕,即使我在导航到它时没有任何问题。

我尝试使用 NavigationActions,但我收到一个在其他任何地方都没有提到的错误。

我像这样导航到主页:

我也试过这个语法:

但我得到同样的错误

还值得注意的是,我使用了 React.component 而不是将屏幕变成函数。我不确定这是否会导致任何问题,因为在 react-navigation v5 的教程中,我看到这个人使用函数而不是反应组件。

任何帮助将不胜感激!

0 投票
3 回答
13730 浏览

reactjs - 将参数传递给选项卡导航器 React Navigation 5

我正在使用materialTopTabs它,一旦安装,它似乎会加载导航器中的所有屏幕。我有一个屏幕列表,里面有一个带有 2 个屏幕的选项卡导航器:PostsUsers。这两个屏幕都依赖于从List传递的参数。但是,我只能使用此方法将参数传递到其中一个屏幕:

我试图通过这样做直接将参数传递给我的导航器:

第一个选项只允许我通过一个屏幕。第二个选项允许我访问导航器中的参数,如下所示:

有没有办法传递temp到我的两个屏幕?如果没有,有没有更好的方法来处理这种情况?

这是代码StackNavigator

0 投票
4 回答
5341 浏览

android - 如何处理 React Native 底部选项卡中的后退按钮行为?

当我的应用程序打开时,我有一个@react-navigation/bottom-tabs导航器,其内容如下:

我的代码中有一个BackHandler,当从主页按下后退按钮时,它会使应用程序退出。一切都很好,我检查了按下后退按钮时是否调用了后处理程序。

但是当我切换到任何其他选项卡然后返回主页并按返回退出应用程序时,后处理程序停止工作并且应用程序显示错误“操作'GO_BACK'没有被任何导航器处理。是否有任何屏幕可以返回至?”

这是一个仅限开发的警告,但在签名版本中,应用程序不会显示任何错误,甚至不会退出。

我该如何解决这个“GO_BACK”操作?

0 投票
1 回答
518 浏览

react-native - 如何找到 React Navigation TabBarIcon/TabBar 元素中使用的“renderIcon”函数的规范?

使用了此功能,但我找不到它的定义位置。我还看到很多使用此代码的教程 - 所以我不确定人们如何理解它是如何使用的。

我从源代码中提取了这个:

找不到这种方法的来源,只有它被使用过。文档中的任何地方都没有提到这种方法 - 我可以找到。

我错过了什么?

0 投票
1 回答
814 浏览

react-native - React-Native:所有选项卡上的抽屉导航器(react-navigation v5)

我想要一个带有 BottomTabNavigation 的应用程序。此外,我希望所有选项卡都可以使用 DrawerNavigation 。

我的AppNavigator.js包含以下内容。我只能“访问” TabNavigator。抽屉不可访问。

如果我将 DrawerScreen 放入 TabsScreen 的第一个元素中,则 DrawerNavigation 只能在第一个选项卡上访问,而不能在所有其他选项卡上访问。反之亦然。如果我将 TabsScreen 放入 DrawerScreen 的第一个元素,则只能在 DrawerScreen 的第一个元素处访问选项卡。

如何在所有选项卡中访问抽屉?我希望将选项卡作为我的主要导航,但因为有更多菜单选项,我希望用户能够从所有视图访问抽屉。每个选项卡都有自己的屏幕,具有自己的功能。当我打开抽屉并访问一个抽屉条目时,它会打开另一个屏幕,这也是“主”选项卡导航。

有任何想法吗?:-)

0 投票
1 回答
47 浏览

flutter - 如何避免android中的系统栏,颤振?

我正在尝试添加底部应用栏但有一个问题,android系统应用栏一直隐藏我的应用栏。我想要实现的是我的底部应用栏将底部扩展为与底部系统栏相同的高度

我的android的样式文件

在此处输入图像描述

0 投票
2 回答
747 浏览

react-native - 使用 createMaterialBottomTab 和 React Native 无法查看非活动选项卡的文本

我对 React 很陌生,正在尝试为底部栏上的非活动选项卡设置文本颜色和其他样式,但已经使用了几个小时并且无法使其工作,因为文本不会出现,除非它是选定的选项卡。我正在使用createMaterialBottomTab

在此处输入图像描述

在此处输入图像描述

如果我能得到任何帮助,这是我的整个屏幕:

非常感谢。

更新

我现在注意到,如果我将图标添加到底部栏,我可以看到项目。除非选择了该项目,否则仍然不是标签。我想这可能是默认行为,但不确定它可以被覆盖吗?

在此处输入图像描述

0 投票
2 回答
512 浏览

react-native - 如何在反应导航 v4 中从底部选项卡导航器调用警报

为了调用 stackNavigator,我们使用 props.navigation.navigate('home')。

但是当我点击底部标签导航图标时如何发出警报。