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以进行圆形选择！

createMaterialTopTabNavigator接受活动背景色

1 个答案: