无法更改选项卡栏背景颜色

Question

我在我的项目中使用了BottomTabNavigator，但是我无法更改选项卡的颜色，它仍然保持默认颜色，尽管我正在尝试更改样式背景颜色。以下是我正在使用的代码，即使调整了“tintcolors”，也没有发生变化。我附上页面的截图。 我想要更改图标所在位置的栏的颜色。.

{
      tabBarPosition: 'bottom',
      tabBarOptions: {
               activeTintColor: 'blue',
          inactiveTintColor: 'grey',
          style: {
            backgroundColor: 'darkcerulean',
            },
            labelStyle: {
              fontSize: 13,
          },

      }
}

有人可以帮我解决这个问题吗？

提前感谢。

- Nishar sheik

---

你正在使用哪个版本的react-navigation？ - Ravi Raj

React-navigation:2.9.2 - Nishar sheik

Answer 1

使用示例：

 export default createBottomTabNavigator({
      home: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({ 
          title: 'Home'
        })
       }, 
      }, 
     {
        initialRouteName: "home",
        tabBarOptions: {
          style: {
           height: 55,
           backgroundColor: '#8e7e7e'
          }
        }
     });

- Gurbela

---

谢谢您的回答@gurbela，但我想更改栏的背景颜色（我们可以查看图标的白色栏），而不是图标。希望您能理解。 - Nishar sheik

谢谢@gurbela，这对我有用（可以更改栏的背景颜色），但现在我无法查看图标。 - Nishar sheik

选择另一种颜色。 - Gurbela

更改图标颜色 - Gurbela

尝试更改了两者，但都没有用，无论如何将尝试另一种替代方案。 - Nishar sheik

Answer 2

文档中提到，tabBarOptions属性已被移除，其中的选项已经转移到屏幕选项中。

现在，您需要使用:

export default createBottomTabNavigator({
  ...
  screenOptions={({ route }) => ({
    // any additional screen options here

    tabBarStyle: {
      backgroundColor: '#8e7e7e',
    },
  })
  ...
});

- Harry Riley

Answer 3

根据此处提到的规范，颜色名称darkcerulean的识别存在问题。

您可以尝试设置十六进制颜色值#08457e。

style: {
   backgroundColor: '#08457e',
}

这里有一个小点心链接

- Pritish Vaidya

---

嘿 @pritish，感谢你的时间。我已经尝试使用十六进制代码，但仍然无法更改。 - Nishar sheik

我已经添加了一个小吃链接进行检查。 - Pritish Vaidya

Answer 4

你需要在选项卡导航器的screenOptions中设置taBarStyle：

tabBarStyle: {backgroundColor: 'yourColor'},

- yaxx