我有改变图标颜色的问题时，tabBarItem是按下我的自定义BottomTabBar。
似乎在屏幕选项tabIcon prop 不返回焦点元素。我想我需要在项目按下触发回调，但找不到文档如何做到这一点。
我的选项卡导航器

<Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: "black",
          tabBarInactiveTintColor: 'gray',
        }}
        tabBar={props => <CustomTabBarV2 {...props}/>}
      >
        <Tab.Screen name="Home" component={Screen1} 
          options={{
            title: 'Home',
            tabBarIcon: ({isFocused}) => { 
              console.log(isFocused)  ---------------> isFocused is undefined, dont know how to trigger callback
              return <AntDesign name="home" size={24} color={'black'}/>
            }
          }}
        />
        <Tab.Screen name="News"  component={Screen2} 
            options={{
              title: 'News',
              tabBarIcon: ({isFocused}) => <Ionicons name="newspaper-outline" size={24} color="black" />,
            }}
        />

        <Tab.Screen name="Profile" component={Screen5}   options={{
          title: 'Profile',
          tabBarIcon: ({isFocused}) => <MaterialIcons name="account-circle" size={24} color="black" />,
        }}/>

        <Tab.Screen name="Settings" component={Screen3}  
          options={{
            title: 'Settings',
            tabBarIcon: ({isFocused}) => <Ionicons name="settings-outline" size={24} color="black" />,
          }} />
        <Tab.Screen name="Control" component={Screen4}  
          options={{
            title: 'Control',
            tabBarIcon: ({isFocused}) => <Ionicons name="scan" size={24} color="black" />,
          }} />
       
      </Tab.Navigator>

CustomTabBar.tsx

import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View} from 'react-native';

import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { primaryColor, secondaryColor } from '../styles/colors';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

interface Props {
    state: any;
    descriptors: any;
    navigation: any;
}

const CustomTabBarV2 : React.FC<Props> = ({state, navigation, descriptors}) => { 
    const {bottom} = useSafeAreaInsets()
    const navItemsRef = useRef(new Array())

    // Anim init value
    const sharedVal = useSharedValue(3);
    const [pillWidth, setPillWidth] = useState<number>(0)
    const [pillHeight, setPillHeight] = useState<number>(0)
  
  
    const animatedStyles = useAnimatedStyle(() => {
        return {
          transform: [{ translateX: sharedVal.value}]
        };
      });
    

    const onPress = (index: number) => {
      console.log(state.routes[index].key === descriptors)

      navItemsRef.current[index].measure((x: number, y: number, width: number, height: number, px: number, py: number) =>
      {
        sharedVal.value = withSpring(x - 7, { // - 7 for the pill to be centered
          damping: 10,
          mass: 0.4
        }) 
        setPillWidth(width + 15)  // + 15 for the pill to be larger than the navItemBox
        setPillHeight(height)
      })
      navigation.navigate({ name: state.routes[index].name, merge: true });
    };
 
    return (
        <View style={[styles.container, {paddingBottom: bottom, paddingHorizontal: 10}]}>
            <Animated.View style={[animatedStyles, {
              width: pillWidth,
              height: pillHeight ,
              backgroundColor: primaryColor,
              position: 'absolute',
              borderRadius: 10
            }]}/>
            
            {state.routes.map((route: any, index: number) => {
              const { options } = descriptors[route.key];
              const label : string =
                options.tabBarLabel !== undefined
                  ? options.tabBarLabel
                  : options.title !== undefined
                  ? options.title
                  : route.name;
      
              const isFocused: boolean = state.index === index;
              
             
      
              return (
                <TouchableOpacity
                  onLayout={event => {
                      const layout = event.nativeEvent.layout;
                      setPillWidth(layout.width  + 15)
                      setPillHeight(layout.height)
                  }}
                  ref={(element) => navItemsRef.current.push(element)}
                  key={index}
                  accessibilityRole="button"
                  accessibilityState={isFocused ? { selected: true } : {}}
                  accessibilityLabel={options.tabBarAccessibilityLabel}
                  testID={options.tabBarTestID}
                  onPress={() => onPress(index)}
                  style={{ 
                    flex: 1,
                    justifyContent: 'center', 
                    flexDirection: 'row', 
                    alignItems: 'center',
                  }}>

                  
                  { isFocused ? 
                    <View
                      style={{ 
                        justifyContent: 'center',
                        flexDirection: 'row', 
                        alignItems: 'center',
                        paddingVertical: 10,
                        paddingHorizontal: 20,
                        borderRadius: 30,
                      }}>
                      {options.tabBarIcon()}
                      <Animated.View style={[{justifyContent: 'center', alignItems: 'center'}]}>
                        <Text style={[{ color: isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor, marginLeft: 2, width: '100%', textAlign: 'center' }]}>
                          {label}
                        </Text>
                      </Animated.View>

                  </View> : 
                    <View
                    style={{ 
                      justifyContent: 'center',
                      flexDirection: 'row', 
                      alignItems: 'center', 
                      paddingVertical: 10,
                      paddingHorizontal: 20,
                      borderRadius: 30,
                    }}>
                      {options.tabBarIcon()}
                    </View>
                  }
                
                </TouchableOpacity>
              );
            })}
        </View>
      );
}

const styles = StyleSheet.create({
    container: {
        height: 80,
        backgroundColor: secondaryColor,
        flexDirection: 'row',
    },
});

export default CustomTabBarV2