createMaterialTopTabNavigator 接受活动背景颜色答案

【问题标题】：createMaterialTopTabNavigator accepts active background colorcreateMaterialTopTabNavigator 接受活动背景颜色
【发布时间】：2019-03-28 05:11:31
【问题描述】：

这可能不是问这个问题的最佳地点，但我在其他任何地方都找不到真正的答案，如果不可能的话，我会感到惊讶。

我有一个底部标签导航器，底部有四个标签。最初我使用createBottomTabNavigator 进行底部标签导航。它的样式完全符合我的要求。如下图：

问题是（在此 GitHub 问题中引用：https://github.com/react-navigation/react-navigation/issues/4146 和此 GitHub 问题：https://github.com/react-navigation/react-navigation/issues/4236）createBottomTabNavigator 不再支持屏幕动画。所以我按照第一个问题的建议执行了createMaterialTopTabNavigator。它的样式几乎完美。以下是创建的样式：

您可以看到，我的其他样式使活动文本和活动白色有效，但是对于活动选项卡背景颜色，没有任何效果。

这是我的相关代码：

const tabConfigs = {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    inactiveTintColor: '#425563',
    activeTintColor: '#fff',
    activeBackgroundColor: '#ff6900',
    indicatorStyle: {
      display: 'none',
    },
    showIcon: true,
    tabStyle: {
      width: '100%',
    },
    labelStyle: {
      fontSize: 11,
      fontWeight: 'bold',
      marginBottom: 5,
    },
    style: {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      height: 55,
      width: '100%',
      borderTopWidth: 0,
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.22,
      shadowRadius: 2.22,
    },
  }
};

export default createMaterialTopTabNavigator({
  DashboardStack,
  StatusStack,
  ReferralStack,
  MoreStack,
},
tabConfigs
);

如何使createMaterialTopTabNavigator 中的活动标签的背景为橙色，就像在createBottomTabNavigator 中一样？

【问题讨论】：

你为什么现在使用顶级导航器。如果您已经在使用底部选项卡，则可以将其用作此选项卡：reactnavigation.org/docs/en/material-bottom-tab-navigator.html 根据最新文档
@AnkushRishi 老实说，因为在我链接到的第一个 Github 问题中建议使用它。但是查看文档，看起来我无论如何都不会拥有我需要的样式控制。
我找到了你，也发现了你的错误！将activeTintColor 更改为您要添加的颜色。目前它是白色的，这就是它消失的原因
@AnkushRishi 只改变标签颜色，不改变背景颜色
在上面的文档链接中，有一个名为 barStyle 的属性，您可以使用它来设置背景样式。

标签： javascript react-native react-navigation

【解决方案1】：

createMaterialTopTabNavigator 无法直接更改活动背景颜色，但您可以使用指示器。

indicatorStyle: {
  height: '100%',
  backgroundColor: '#ff6900'
}

使用此方法，您甚至可以为其添加一个borderRadius 以进行圆形选择！

【讨论】：

谢谢你拯救我的一天："))