createMaterialTopTabNavigator 接受活动背景颜色

Question

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

我有一个底部标签导航器，底部有四个标签。最初我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？

Answer 1

createMaterialTopTabNavigator 没有直接更改活动背景颜色的方法，但是您可以使用指示器。

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

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