React Native基于React Navigation的底部标签聚焦时如何修改文字颜色

你使用的是@react-navigation/bottom-tabs库，要修改激活状态下的底部导航Label颜色，有两种常用实现方式：

方式一：全局配置激活/未激活色（推荐） #

直接在tabBarOptions中添加activeTintColor和inactiveTintColor属性，这两个属性会同时作用于图标和文字的颜色，刚好和你当前图标激活色的逻辑对齐，修改后的tabBarOptions代码如下：

tabBarOptions={{
  style: styles.navigator,
  showLabel: true,
  // 激活状态下文字、图标颜色
  activeTintColor: '#C71FF7',
  // 未激活状态下文字、图标颜色
  inactiveTintColor: '#333',
  labelStyle: {
    fontFamily: 'montserrat-regular',
    paddingBottom: 8,
    // 原有color: '#333'可以删除，会被上面的inactiveTintColor覆盖
  },
  tabStyle: {
    backgroundColor: barColor,
  },
}}

这个方案改完后，所有非自定义的Tab的文字和图标都会自动匹配激活/未激活的颜色，不需要额外修改每个Screen的配置。

方式二：单独自定义每个Tab的Label样式 #

如果需要让文字的激活色和图标不一样，可以给每个Screen的options添加tabBarLabel回调，自行控制样式：

<BottomBar.Screen
  name="Home"
  component={EmptyScreen}
  options={{
    tabBarIcon: ({ color, focused }) => (
      <Icon2 name="home" size={28} color={focused ? '#C71FF7' : color} />
    ),
    // 自定义Label样式
    tabBarLabel: ({ focused, color }) => (
      <Text style={{
        fontFamily: 'montserrat-regular',
        paddingBottom: 8,
        // 这里可以自定义文字颜色，比如激活用红色，未激活用灰色
        color: focused ? 'red' : '#999'
      }}>
        首页
      </Text>
    )
  }}
/>

注意事项 #

你代码中名为Rocket的Tab用的是自定义的TabBarAdvancedButton组件，这个Tab的文字颜色需要你在TabBarAdvancedButton内部接收focused参数自行修改，上述全局配置对自定义Tab按钮不生效。

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