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, чтобы иметь круглое выделение!