时间戳

首页 > 解决方案 > 如何在反应原生导航中更改选定底部选项卡的背景颜色

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

问题描述

我正在按应用程序使用 react native navigation v2。我需要更改所选底部选项卡的背景颜色。

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'
    }
}

标签： react-nativewix-react-native-navigation

解决方案

正如@yeslamFaded 一样，使用更新版本的反应导航可能是个好主意。

如果要更改所选选项卡的背景颜色，可以使用创建底部选项卡导航器时的activeBackgroundColor道具tabBarOptions

例如 ：

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

所有属性都在此处的文档中可用

推荐阅读