如何在反应原生导航中更改选定底部选项卡的背景颜色

Question

I am using react native navigation v2 for by application. I need to change the background color of the selected bottom tab.

options: {
    bottomTab: {
        icon: val.icon,
        text: val.text,
        textColor: getColorTheme("SECONDARY", "LIGHT"),
        selectedTextColor: getColorTheme("ORANGE", "LIGHT"),
        selectedIconColor: getColorTheme("ORANGE", "LIGHT"),
        fontFamily: FONTFAMILY.SEMIBOLD,
        fontSize: FONTSIZE.FONT_12,
        selectedFontSize: FONTSIZE.FONT_12,
        selectedBackgroundColor:'red'
    }
}

Answer 1

as @yeslamFaded it could be a good idea to use a newer version of react-navigation.

if you want to change the background color of the selected tab you can use the activeBackgroundColor prop of tabBarOptions when you are creating the bottom tab navigator

for instance:

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    tabBarOptions: {
      activeBackgroundColor: 'tomato',
    },
  }
);

All the properties are available in the documentation here