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

react-navigation - 使用 React Navigation 5 在选项卡双击时重置选项卡内的堆栈

我想知道如果 Tab 被聚焦并按下,如何重置 BottomTabNavigator 内的堆栈。

这是我到目前为止的代码:

在 TODO 中(在代码片段中)可能应该完成以下操作:

  • 从应用 NavigationContainer 获取 navigationRef
  • 检查选定的 BottomTab 是否聚焦(以确定双击)
    • e.preventDefault
    • 重置SomeStack(不确定如何在 BottomTabNavigator 中获取导航对象的堆栈)

有没有人能够做到这一点?感谢所有答案:)

0 投票
3 回答
2854 浏览

react-native - 如何使用底部标签导航处理 SafeArea 的背景颜色?

当前行为

大家好,

我想为底部选项卡设置背景颜色。所以我做了如下。

https://user-images.githubusercontent.com/6939811/76062160-b6dfde00-5fb7-11ea-8808-3f2562e90c24.png

问题是 SafeArea 有白色背景

预期行为

我期望的是 https://user-images.githubusercontent.com/6939811/76062716-cca1d300-5fb8-11ea-926a-acbd42d412dd.png

那么你能告诉我如何在 React Navigation 版本 5 中解决这个问题吗?谢谢!

你的环境

iOS 反应原生:0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/底部标签:^5.0.5

0 投票
0 回答
466 浏览

javascript - React Navigation v5 如何从堆栈屏幕中隐藏选项卡

我有一个应用程序,它由带有 5 个屏幕的选项卡式导航组成,其中一个是两个屏幕的堆栈导航。在两个堆栈屏幕之一上,我想隐藏底部选项卡。我怎样才能做到这一点 ?

我已经检查了React Navigation V5 隐藏底部选项卡,但是当我尝试使用navigation.setOptions({ tabBarVisible: false })它时,它更改了堆栈导航器的选项,而不是选项卡之一。

这是我的代码

0 投票
1 回答
508 浏览

react-native - 打开键盘时出现标题故障

我有个问题。当我打开键盘(通过点击TextInput)时,出现了一个故障(参见 GIF)。

目前,我正在使用stack navigatorinside a tab navigator(仅使用stack navigator我没有任何问题)。

可能是什么问题呢?我找不到任何解决方案!

航海家:

包.json:

0 投票
0 回答
155 浏览

react-navigation - 由于 useIsFocused 钩子,我无法设置透明模式

位于底部选项卡上的堆栈导航器包含 2 个屏幕。一个屏幕实现了 react-native-camera,另一个实现了模态。我试图使模态透明,但它失败了(它有一个白色的背景)。之所以发生这种情况,是因为安装和卸载我的相机组件的 useIsFocused 钩子。你对我如何解决这个问题有什么建议吗?

0 投票
3 回答
7412 浏览

react-native - 是否有禁用标签栏按钮的选项

在我的 react native 应用程序中,我有一个使用 react-navigation-material-bottom-tabs 的路由器组件。

在那个组件中,我像这样创建了它。

这工作正常。但我想在某些情况下禁用此栏的某些选项卡。例如,如果配置文件尚未获得批准,请禁用设置选项卡。有什么办法可以在我的屏幕上执行此操作吗?(如果它不在路由器中会更好,因为我无法在路由器中发送 API 请求)。如何访问屏幕中的 tabBar 选项?如何禁用标签?请帮忙。

0 投票
0 回答
309 浏览

react-native - navigation.goBack 错误行为 - 选项卡导航器内的堆栈

我认为它是一个错误,问题是休闲:

我有这个(在选项卡导航器中堆叠导航器):

  • 一个选项卡
    • 堆栈
    • 抗体堆栈

在哪里:

  • 抗体堆栈
    • Aba 组件
    • Abb 组件

当我在 Abb 组件中使用 navigation.goBack() 函数时,goBack 函数将我发送到 Aa 堆栈而不是 Aba 组件。

这是一个奇怪的行为,因为如果我按下 Android 后退按钮将我发送到 Aba 组件,我认为这就是 navigation.goBack 应该如何工作。


这是我的 Ab 堆栈

这是我的 A 标签:

这是 stackScreenOptions ,如果您想知道:

0 投票
1 回答
2268 浏览

javascript - 如何使用 React Navigation 动态更改选项卡标题?

我正在使用 React Navigation 库在 React Native 中构建一个应用程序。我面临的问题是,当在 Stack Navigator (HomeStack) 中呈现 Tab Navigator 时,每个单独的选项卡都会保留父 Stack Navigator 的标题“Home”。

在阅读了有关嵌套导航器的文档(https://reactnavigation.org/docs/nesting-navigators/)之后,我尝试将 Tab Navigator 中的每个 Tab 设为自己的 Stack,删除父 Stack 上的标题(使用options={{headerShown: false}}) ,并在每个选项卡堆栈上设置单独的标题标题(使用options={{ headerShown: true),但这只是从每个选项卡中完全删除标题。

当前流程是用户打开应用程序,被定向到登录堆栈,然后一旦他们点击“登录”按钮,应用程序就会呈现 HomeStack,其中显示各种选项卡选项。但是,每个选项卡都有相同的标题“主页”,即使每个选项卡都是自己唯一的堆栈。

这是我的导航器的当前布局(所有内容都包含身份验证上下文):

之前已经问过这个问题,解决方案过去是在初始堆栈声明期间添加更新的参数(在此处讨论:https ://github.com/react-navigation/react-navigation/issues/741 ),但是自最新更新(第 5 版)以来,导航器功能发生了变化。现在,向初始 Stack 声明添加参数会返回错误: 在此处输入图像描述

这样做的最终目标是让每个 Tab 充当它自己的 Stack,并在屏幕的左上角/右上角显示带有唯一标题/操作按钮的标题。我仍然不清楚如何通过新的更改来实现这一点,所以任何指导都将不胜感激!

0 投票
3 回答
3379 浏览

javascript - 如何从反应导航更改底部材质选项卡导航器的高度

我正在尝试创建一个响应式应用程序,该应用程序在每个屏幕尺寸上都看起来不错。唯一不能正确缩放的是底部导航器(这个)。平板电脑是最大的问题,因为导航栏太小了。有谁知道如何访问它的高度或以其他方式更改它?

这就是它的外观(电话)

在此处输入图像描述

这就是它在平板电脑上的样子 在此处输入图像描述

0 投票
0 回答
1535 浏览

react-native - React Navigation Material Top Tab Navigator Tabbar背景需要随组件过渡背景颜色

底线问题:

任何人都可以建议如何在左右滑动时转换标签栏的背景颜色以匹配屏幕背景颜色?

我正在为三个选项卡使用 topMaterialTabNavigator。我创建了一个自定义标签栏。这三个标签有不同的颜色。我希望标签栏的背景颜色与过渡中屏幕的背景颜色相匹配。但是,我还没有找到一种方法来做到这一点。

如果我更改索引上的背景颜色,它看起来像这样:

在此处输入图像描述

刷卡器

如果我尝试使用gestureHandlerProps:

我得到这样的颜色滞后:

在此处输入图像描述 任何人都可以建议如何在左右滑动时转换标签栏的背景颜色以匹配屏幕背景颜色?

提前喝彩。

软件版本 iOS 或 Android
@react-navigation/native 5.0.1
@react-navigation/material-top-tabs 5.0.2
react-native-tab-view 2.13.0
react-native 0.61.5 node 12.14.1
yarn 1.21。 1