如何移除BottomTabNavigation中Tab.Screen的紫色背景色？

你开启了shifting={true}，这是Material风格底部导航的特性，选中的Tab默认会显示紫色背景。以下两种方法可以解决这个问题：

方法一：关闭shifting效果（保持所有Tab样式统一） #

直接将shifting={true}改为shifting={false}，选中的Tab就不会出现单独的背景色，和其他Tab样式保持一致。

修改后的核心代码片段：

<Tab.Navigator
      inactiveColor="#808093"
      activeColor="#0D6FB5"
      initialRouteName="Home"
      shifting={false} // 修改此处为false
      sceneAnimationType={false}
      barStyle={{
        backgroundColor: '#fff',
        borderTopColor: '#808093',
      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          // 原有图标逻辑代码不变
        },
      })}
>

方法二：保留shifting效果，替换紫色背景 #

如果想保留shifting的切换动画，只需在Tab.Navigator中添加activeBackgroundColor属性，设置为和导航栏背景色一致的#fff即可：

修改后的核心代码片段：

<Tab.Navigator
      inactiveColor="#808093"
      activeColor="#0D6FB5"
      initialRouteName="Home"
      shifting={true}
      activeBackgroundColor="#fff" // 添加此属性覆盖默认紫色
      sceneAnimationType={false}
      barStyle={{
        backgroundColor: '#fff',
        borderTopColor: '#808093',
      }}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          // 原有图标逻辑代码不变
        },
      })}
>

也可以通过screenOptions全局配置每个Tab的活跃背景色：

screenOptions={({ route }) => ({
  tabBarActiveBackgroundColor: '#fff', // 添加此配置
  tabBarIcon: ({ focused, color, size }) => {
    // 原有图标逻辑代码不变
  },
})}

内容的提问来源于stack exchange，提问作者Naman Agrawal