如何移除TabAndroid激活标签的背景色并修复图标颜色问题？

1. 移除激活标签的背景色 #

在TabAndroid.Navigator中添加tabBarActiveBackgroundColor属性，将其值设置为与底部导航栏背景色一致（或者"transparent"），就能覆盖默认的激活背景色：

<TabAndroid.Navigator
  sceneAnimationEnabled={true}
  barStyle={{ backgroundColor: colors.primary }}
  // 添加这一行移除激活背景色
  tabBarActiveBackgroundColor={colors.primary}
  screenOptions={({ route }) => ({
    // ... 原有代码
  })}
  activeColor="#fff"
  inactiveColor="#ccc"
>

2. 修改图标颜色（针对网络图片） #

你当前Tab1使用的是网络图片，需要通过Image组件的tintColor属性绑定传入的color参数，这样激活/非激活状态下图标颜色会自动跟随activeColor和inactiveColor变化：

tabBarIcon: ({ color, focused }) => {
  let iconStr: string = "";
  if (route.name === "Tab1")
    return (
      <Image
        source={{
          uri: "https://imgs.search.brave.com/70390jQSfVsjPzoOaHb96nE2lssrdYkr0HOVLKagutE/rs:fit:1024:1024:1/g:ce/aHR0cDovL2ljb25z/Lmljb25hcmNoaXZl/LmNvbS9pY29ucy9w/YW9tZWRpYS9zbWFs/bC1uLWZsYXQvMTAy/NC9zb2NpYWwtZmFj/ZWJvb2staWNvbi5w/bmc",
        }}
        // 新增tintColor绑定color参数
        style={{ width: 10, height: 20, tintColor: color }}
      />
    );
  // ... 原有代码
}

完整修改后的代码 #

function TabsAndroid() {
  return (
    <TabAndroid.Navigator
      sceneAnimationEnabled={true}
      barStyle={{ backgroundColor: colors.primary }}
      // 移除激活状态背景色
      tabBarActiveBackgroundColor={colors.primary}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, focused }) => {
          let iconStr: string = "";
          if (route.name === "Tab1")
            return (
              <Image
                source={{
                  uri: "https://imgs.search.brave.com/70390jQSfVsjPzoOaHb96nE2lssrdYkr0HOVLKagutE/rs:fit:1024:1024:1/g:ce/aHR0cDovL2ljb25z/Lmljb25hcmNoaXZl/LmNvbS9pY29ucy9w/YW9tZWRpYS9zbWFs/bC1uLWZsYXQvMTAy/NC9zb2NpYWwtZmFj/ZWJvb2staWNvbi5w/bmc",
                }}
                // 绑定图标颜色
                style={{ width: 10, height: 20, tintColor: color }}
              />
            );
          if (route.name === "Tab2") iconStr = "T2";
          if (route.name === "StackNavigator") iconStr = "Stack";
          return <Text style={{ color }}>{iconStr}</Text>;
        },
      })}
      activeColor="#fff"
      inactiveColor="#ccc"
    >
      <TabAndroid.Screen
        name="Tab1"
        options={{ tabBarColor: "red" }}
        component={Tab1}
      />
      <TabAndroid.Screen name="Tab2" component={Tab2} />
      <TabAndroid.Screen name="StackNavigator" component={MyStack} />
    </TabAndroid.Navigator>
  );
}

内容的提问来源于stack exchange，提问作者Hendrick Galarza