如果当前标签是活动的，我想改变文本颜色。我怎么做？

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  BottomTabBar,
  createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import { FontAwesome as Icon, Entypo as Icon2 } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import { TabBarAdvancedButton } from '../components';
import { EmptyScreen } from '../screens';
import { IS_IPHONE_X } from '../utils';

const BottomBar = createBottomTabNavigator();
const Stack = createStackNavigator();

type Props = {
  barColor: string,
};

export const TabBar: React.FC<Props> = ({ barColor }) => (
  <NavigationContainer>
    <BottomBar.Navigator
      tabBar={(props) => (
        <View style={styles.navigatorContainer}>
          <BottomTabBar {...props} />
          {IS_IPHONE_X && (
            <View
              style={[
                styles.xFillLine,
                {
                  backgroundColor: barColor,
                },
              ]}
            />
          )}
        </View>
      )}
      tabBarOptions={{
        style: styles.navigator,
        showLabel: true,
        labelStyle: {
          fontFamily: 'montserrat-regular',
          paddingBottom: 8,
          color: '#333',
        },
        tabStyle: {
          backgroundColor: barColor,
        },
      }}>
      <BottomBar.Screen
        name="Home"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon2 name="home" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Profile"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="user" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Rocket"
        component={EmptyScreen}
        options={{
          tabBarButton: (props) => (
            <TabBarAdvancedButton bgColor={barColor} {...props} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Messages"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="wechat" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
      <BottomBar.Screen
        name="Settings"
        component={EmptyScreen}
        options={{
          tabBarIcon: ({ color, focused }) => (
            <Icon name="gear" size={28} color={focused ? '#C71FF7' : color} />
          ),
        }}
      />
    </BottomBar.Navigator>
  </NavigationContainer>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  navigatorContainer: {
    position: 'absolute',
    height: 60,
    bottom: 0,
    left: 0,
    right: 0,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  navigator: {
    borderTopWidth: 0,
    backgroundColor: 'transparent',
    elevation: 30,
    height: 60,
  },
  xFillLine: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 34,
  },
});