聚焦时从createBottomTabNavigator更改选项卡的背景色

Question

我只想在tabB焦点对准时更改它的backgroundColor值

const tabBarOptions = { style: { backgroundColor: "#920043" } }
const tabNav = createBottomTabNavigator ({ tabA, tabB, tabC }, { 
tabBarOptions })

但是似乎无法在此处传递有关导航/路线的信息。

Answer 1

背景色已全局应用。

您可以设置选定的颜色和默认颜色。

const tabNav = createBottomTabNavigator (
  { tabA, tabB, tabC },
  {
      tabBarOptions: {
        activeTintColor: "red",
        inactiveTintColor: "gray"
      }
  }
)

如果要在选择时更改背景颜色，

const { routeName } = navigation.state;
const tabNav = createBottomTabNavigator (
  { tabA, tabB, tabC },
  {
      tabBarOptions: {
          style: {
          backgroundColor: routeName == "tabA" ? "red" : routeName == "tabB" ? "blue" : "green",
        }
      }
  }
)