问题标签 [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 回答
1127 浏览

react-native - React-Navigation 版本 5 中的 `tabBarComponent` 选项在哪里?

我正在将 RN 项目版本 4 迁移到 5。

我正在使用tabBarComponent用自定义选项替换选项卡栏组件的选项。旧文档

如何在版本 5 中实现相同功能,我在新文档中找不到此选项。

0 投票
5 回答
46179 浏览

react-native - 如何使用 React Native 在屏幕中间显示加载进度或微调器?

我正在开发 React Native 应用程序。

我能够自己解决所有问题,但这是例外。我将使用底部标签导航器加载另一个屏幕。

例如,用户登录应用程序后,它应该显示主屏幕,其中包含许多图片和许多样式表效果、图标。因此,在登录确认后(我的意思是在登录确认警报后),几秒钟后出现主屏幕。

所以我想在登录屏幕中显示一些微调器,同时在后台加载主主屏幕,当它准备好显示时,擦除微调器并显示主主屏幕。我怎样才能做到这一点?

我的底部标签导航器只是用createBottomTabNavigator()方法创建的。

0 投票
1 回答
194 浏览

react-native - 根据条件从选项卡导航到堆栈中的特定屏幕

我有一个使用 创建的底部选项卡栏createBottomTabNavigator,当用户按下其中一个选项卡时,我需要导航到特定堆栈(使用创建createStackNavigator)。我已经可以这样做了,但现在我需要根据条件决定首先进入该堆栈中的哪个屏幕。我知道可以设置为确保特定屏幕始终首先显示的 initialRouteName 属性,所以也许我可以使用它?

基本上,我希望用户在第一次按下选项卡时查看教程,然后从第二次开始查看实际屏幕。

这是我目前拥有的(不工作):

0 投票
1 回答
835 浏览

reactjs - 如何使用后退按钮而不是选项卡来实现反应导航堆栈/bottomTab 导航器进行导航?

我已经实现了一个当前不使用任何类型导航的本机应用程序。我想实现反应导航,但正在努力重新创建我已经拥有的东西。下面我在下面添加了一些图片,以举例说明我目前没有反应导航的情况。我想使用 react-navigation 准确地复制它。

这是主屏幕:https ://ibb.co/XWxCpwt

这是右侧选项卡视图(左侧选项卡视图按钮更改为后退按钮):https ://ibb.co/XzFB8v8

这是左侧选项卡视图(右侧选项卡视图按钮变为后退按钮):https ://ibb.co/zP2ZBK5

我想明确一点,中心底部按钮与显示中心视图无关。它具有完全不同的功能。这就是为什么我希望后退按钮以这种方式工作的原因。

这是我的 App.js 文件中的一个小片段。如果没有 react-navigation,导出类上方的所有内容都将被注释掉。我没有花太多时间试图弄清楚这一点,因为我已经没有太多运气尝试使用 react-native-navigation 来实现。任何帮助,将不胜感激!

我已经更新了我的 App.js。这是迄今为止我能得到的最接近的。接下来需要的步骤是将选项卡配置为在单击时不显示当前链接到选项卡的视图,而是更改为返回按钮以将用户返回到主屏幕(根组件)。这个应用程序所需的导航外观是感觉就像三个视图并排放置。用户一次只能导航一个视图,并且不能在其间跳转。

0 投票
1 回答
783 浏览

reactjs - 使用 React-Navigation v4 延迟加载特定选项卡

我正在使用 React-Navigation V4,问题是,是否有任何延迟加载仅特定选项卡的方法,例如如果我有四个选项卡并且我想在选项卡组件初始化后加载两个选项卡并且不想加载其他两个选项卡只有当用户激活它们时才会加载两个。如果我lazy: true在 React 中使用它将工作所有选项卡,或者延迟加载将被禁用或全部启用。

0 投票
5 回答
5309 浏览

javascript - 改变反应原生tabBar的背景颜色

所以我真的是反应原生和移动开发的新手,我想改变底部标签栏导航的背景颜色,我似乎不知道该怎么做,因为我从一个带导航的反应原生项目开始(世博会初始化阶段的选项),内容的编写方式与我在网上看到的不同,我知道我需要添加

但老实说,我知道确切的位置,如果有人可以提供帮助,将不胜感激!这是我的代码:

0 投票
1 回答
678 浏览

react-native - createBottomTabNavigator 在单击时不呈现 createStackNavigator

我正在关注 react-navigation 教程,一切正常,直到我尝试使用,createBottomTabNavigator我将两个传递createStackNavigatorcreateBottomTabNavigator我遇到了空白屏幕,FavNavigator根本没有渲染。
我尝试用组件替换FavNavigatorFavoritesScreen并显示它,但缺少标题栏。

这是应用程序:

在此处输入图像描述

这是导航器配置代码:

提前致谢。

完整代码: GitHub

0 投票
1 回答
2588 浏览

reactjs - 在 React Native 中实现 Tab Navigator 时出错

尝试在 React Native 应用程序中创建一个 BottomTabNavigtor。这是我的导航代码。

遵循此应用程序的课程。收到此错误:

TypeError: (0, _native.createNavigatorFactory) 不是函数。(在“(0,_native.createNavigatorFactory)(BottomTabNavigator)”中,“(0,_native.createNavigatorFactory)”未定义)

任何帮助,将不胜感激。谢谢。

0 投票
1 回答
1242 浏览

ios - 我们如何在反应原生版本 .61 中将动画添加到底部选项卡图标

如何在 react-native Navigation 中自定义 bottomTab 并向其添加自定义动画。我目前正在使用 react native 版本 .61,我只想将动画放在中间选项卡图标中。图标应该跳跃和旋转。我需要它用于 ios 应用程序。

0 投票
1 回答
7375 浏览

react-native - React Navigation 5 将参数传递到嵌套导航器内的屏幕

我们正在将 React Navigation 4 中的应用程序迁移到 React Navigation 5。该项目有一个 BottomTabNavigator,它的其中一条路线有一个嵌套的 TopTabNavigator 和三个选项卡。按下时,BottomTabNavigator 中的选项卡之一导航到排序屏幕,您可以在其中选择排序参数以进行排序,然后导航到添加所选排序参数的“待定”路由,该路由应到达 TopTabNavigator 内的三个列表屏幕之一. 目前,我在这些屏幕中接收到的 route.params 为 null,我认为这是因为中间有另一个导航器(topTabNavigator)。

底部标签导航器

排序屏幕选项卡:

createTopTabsNavigator:

非常感谢您解决这个问题