React native 如果文本聚焦，如何更改文本颜色？

如果当前标签处于活动状态，我想更改文本颜色。我怎么做到的

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
  }
});

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{BottomTabBar，createBottomTabNavigator}；
从“@expo/vector icons”导入{FontAwesome as Icon，Entypo as Icon2}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../components”导入{TabBarAdvancedButton}；
从“../screens”导入{EmptyScreen}；
从“../utils”导入{IS_IPHONE_X}；
const BottomBar=createBottomTabNavigator（）；
const Stack=createStackNavigator（）；
类型道具={
barColor:字符串；
};
export const TabBar:React.FC=（{barColor}）=>(
(
{IS_IPHONE_X&&(
)}
)}
禁忌选项={{
style:styles.navigator，
showLabel:true，
标签样式：{
fontFamily:“蒙特塞拉特普通”，
填充底部：8，
颜色：“#333”，
},
标签样式：{
背景颜色：barColor，
},
}}
>
(
)
}}
/>
(
)
}}
/>
(
)
}}
/>
(
)
}}
/>
(
)
}}
/>
);
const styles=StyleSheet.create({
容器：{
弹性：1，
},
导航容器：{
位置：'绝对'，
身高：60，
底部：0，
左:0,，
右:0,，
阴影颜色：“000”，
阴影偏移：{
宽度：0，
身高:1,，
},
阴影不透明度：0.22，
阴影半径：2.22，
},
导航器：{
borderTopWidth:0，
背景色：“透明”，
标高：30，
身高：60
},
xFillLine：{
位置：'绝对'，
底部：0，
左:0,，
右:0,，
身高：34
}
});

---

检验。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。您可以使用

tabBarLabel

prop，它的工作原理与代码中使用的

tabBarIcon

prop类似

options={{
  tabBarLabel: ({focused, color, size}) => (
    <Text style={{color: focused ? 'red' : color}}>Updates</Text>
  ),
}}

函数MyTabs（）{
返回(
(
更新
),
tabBarIcon:（{color，size}）=>(
),
}}
name=“主页”
组件={主屏幕}
/>
(
设置
),
tabBarIcon:（{color，size}）=>(
),
}}
name=“设置”
组件={SettingsScreen}
/>
)
}

---

有关

Tab.Navigator

props的更多详细信息：

我收到一个错误：“JSX元素类不支持属性，因为它没有prop属性”，如果我添加了TabbarLabel，您可以检查

TabBarAdvancedButton

组件吗？我使用

tabBarLabel

进行了测试，没有发现任何问题。（家），tabBarIcon:（{color，size}=>（），}}}/>谢谢你，我弄错了，谢谢你，不用客气：）

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        options={{
          tabBarLabel: ({focused, color, size}) => (
            <Text style={{color: focused ? 'red' : color}}>Updates</Text>
          ),
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
        }}
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          tabBarLabel: ({focused, color, size}) => (
            <Text style={{color: focused ? 'red' : color}}>Settings</Text>
          ),
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="account-settings"
              color={color}
              size={size}
            />
          ),
        }}
        name="Settings"
        component={SettingsScreen}
      />
    </Tab.Navigator>
  )
}