问题标签 [react-navigation-v5]

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

react-native - 在 React 导航 v5 中突出显示当前活动抽屉菜单

我使用反应导航版本创建了一个自定义抽屉导航器:5.X,但当前活动选项卡没有在自定义抽屉菜单中突出显示。

  1. 我在 DrawerItem 元素中添加了“activeTintColor”,但它没有应用于活动项目。
  2. 我还在抽屉内容选项中添加了 activeTintColor。但也没有得到应用。他们有什么方法可以在自定义抽屉组件中使用这个常用选项吗?
  3. 我在 DrawerItem 元素中使用了“图标”,我根据反应导航文档添加了默认道具(颜色、焦点、大小)。因此,图标的颜色为“灰色”(可能是默认行为)。如何更改此默认道具值?
  4. 'icon' 中的默认道具 'focused' 也不起作用。所选选项卡的图标不会更改。

请找到以下代码图像。如果我犯了任何错误,请告诉我。

导航器代码:

在此处输入图像描述

自定义抽屉组件:

在此处输入图像描述

当前活动标签:主页

在此处输入图像描述

0 投票
2 回答
2283 浏览

reactjs - 关于 React Navigation v5 中自定义标题的问题(不可点击的后退按钮)

嗨,我正在使用 React 导航 v5。我正在尝试为特定屏幕实现自定义标题。所以我的自定义标题看起来像这样

CustomHeader.js

导航器看起来像这样

它呈现自定义标题和自定义后退按钮,但后退按钮不可点击。所以我尝试了。

使用此代码,它根本不会显示带有自定义标题的后退按钮。但是当我删除自定义标题(标题:道具=>)时,它会显示自定义后退按钮。

我错过了什么?

0 投票
1 回答
474 浏览

react-native - 对 React 导航版本 5 中的深层链接感到困惑

嗨,家伙首先卡在嵌套导航器中的结构深层链接上,这是我的导航代码,它只是堆叠在选项卡内

和底部标签

所以这是反应导航的配置部分,首先为了组织深层链接,我放了一个堆栈父级

然后当导航到这个屏幕时

这里结果 在此处输入图像描述

感谢提前

0 投票
1 回答
293 浏览

react-native - 反应导航 v4 到 v5 问题

所以,我目前正在使用 SwitchNavigator 使用 Navigation v4。我想迁移到 v5,但我无法让它像 Switch 一样工作。我有 3 个堆栈,AuthStack(堆栈导航器)、TabScreens(它是一个底部导航器)、术语(只是一个屏幕),我的 v4 配置是这样的:

因此,当条款屏幕第一次出现并按下一步时,我会自动导航到 Auth,如果我按下 android 后退按钮,则应用程序将关闭,因为 Auth 堆栈是主堆栈。但是在 v5 上不会发生同样的情况。我有一个错误The action 'NAVIGATE' with payload {"name":"Auth"} was not handled by any navigator. Do you have a screen named 'Auth'?

我正在进行的 v5 配置是这样的:

究竟是什么问题?

0 投票
1 回答
1269 浏览

reactjs - React Native Navigation 自定义边框

我是 React Native 的初学者。我想用自定义样式配置React Navigation 5.x。而且我无法像下面那样修剪边框底部。请帮我解决一下这个。

React 导航的自定义样式

我当前的代码:

先感谢您。

0 投票
0 回答
309 浏览

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

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

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

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

在哪里:

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

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

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


这是我的 Ab 堆栈

这是我的 A 标签:

这是 stackScreenOptions ,如果您想知道:

0 投票
1 回答
29 浏览

react-native - 静态设置堆栈导航器的标题标题

假设我有 2 个导航器,如下所示:

Stack导航器加载BottomTabs另一个导航器:

我想Stack根据从加载的屏幕更改标题标题BottomTabs。试图将title选项传递给单个屏幕BottomTabs不起作用。

如何Stack根据从孩子加载的屏幕更改导航器的标题?

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

0 投票
2 回答
452 浏览

react-native - 自定义抽屉导航器

我正在尝试创建一个自定义 DrawerNavigator,其中根据 redux 存储状态显示/隐藏项目。我对 react-native 比较陌生 :)

到目前为止,我所有的尝试都会导致错误。正如“提供自定义抽屉内容”文档所示,我的最后一次尝试是创建这样的自定义内容(我将其更改为功能组件)

因此,用户登录 redux 存储是为了设置用户数据(一切正常),并且抽屉应该考虑用户可能拥有的角色并仅显示可能的路线。希望我解释清楚,有人可以给出正确方向的提示。谢谢英戈

编辑:我通过使用以下代码来实现这一点

并在主 App.js

0 投票
2 回答
10068 浏览

react-native - 反应本机导航 v5 选项卡按下不起作用

如代码所示,未调用 tabPress,是我做错了还是遗漏了什么,不幸的是,我没有找到任何反应导航版本 5 的代码示例。