反应导航：更改开关底部选项卡上的所有背景色

Question

在React Navigation 5中切换选项卡时，是否可以更改底部选项卡的整个背景颜色？

像这样（例如，tiktok应用程序）：

Background black on first tab

Background white on first tab

Answer 1

您可以在style中设置tabBarOptions

<Tab.Navigator
  initialRouteName="Feed"
  tabBarOptions={{
    activeTintColor: '#e91e63',
    inactiveTintColor: '#fff',
    style: {
      backgroundColor: '#000',
    }
  }}
>
  {/* screens */}
</Tab.Navigator>

使用道具中当前有效的路线信息来根据需要切换颜色。

可运行的示例：https://snack.expo.io/@notbrent/createbottomtabnavigator---background-color

edit：看来我确实对此有误，并且没有明显的方法可以使用标准底部标签导航器基于活动标签来编辑标签栏背景颜色。您可以使用createMaterialBottomTabNavigator轻松解决此问题，否则您可能需要做其他一些工作，例如：实现自定义标签栏或扩展默认标签栏。