反应导航更改材质顶部选项卡的背景颜色

Question

我想在反应导航 5 中更改材质顶部选项卡的边框底部颜色和背景颜色

我尝试了下面的代码，但是当我更改 tabStyle 的背景颜色时，indicatorStyle 边框底部颜色不起作用，但是当我删除 tabstyle 时，指示器样式起作用。

 <Nav />
      <tTab.Navigator
      tabBarOptions={{
          tabStyle: { backgroundColor: "black" },
          indicatorStyle: {
            borderBottomColor: "#50d3a7",
            borderBottomWidth: 2,
          },
        }}
        initialRouteName="Points"
      >
        <tTab.Screen name="Points" component={pointleftScreen} />
        <tTab.Screen name="Daily Rewards" component={calendarScreen} />
      </tTab.Navigator>

我在这里添加了示例 - https://snack.expo.io/@adjmpw/chaneg-borderbottom-and-background

Answer 1

你必须使用 barOptions 属性来自定义这些东西

barStyle = {{
  backgroundColor: '#694fad', //Color of your choice
  borderBottomColor: '#50d3a7',
  borderBottomWidth: 2,
}}

你必须像这样使用它

<tTab.Navigator
  initialRouteName="Points"
  barStyle={{
    backgroundColor: '#694fad', //Color of your choice
    borderBottomColor: '#50d3a7',
    borderBottomWidth: 2,
  }}>
  >
  <tTab.Screen name="Points" component={pointleftScreen} />
  <tTab.Screen name="Daily Rewards" component={calendarScreen} />
</tTab.Navigator>

Working Example