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以进行循环选择！