我是react native的新手。我正在努力解决这个问题。我想将tabBarBadgeStyle更改为是否处于活动状态。

<Tab.Screen name="mcart" component={CartNavigation} options={{
                    headerShown:false,
                    tabBarShowLabel: false,
                    tabBarBadge:cartData.cartItems ? cartData.cartItems.length:0,
                    tabBarBadgeStyle: ({ focused }) => {
                        return {
                            backgroundColor: focused ? 'red' : 'gray',
                            top: focused ? -15 : 0,
                            alignSelf: 'center',
                            justifyContent: 'center',
                            alignItems: 'center',
                            minWidth: 30,
                            height: 30,
                            borderRadius: 15,
                            borderWidth: 1,
                            borderColor: 'white'
                        }
                    },
                    tabBarIcon: ({focused, image}) => {
                        image = require('../assets/icons/add-to-cart.png');
                        return <View style={focused ? styles.activeTab : styles.inactiveTab}>
                            <Image
                                source={image}
                                resizeMode={'contain'}
                                style={{
                                    width: 15,
                                    height: 15,
                                    tintColor: focused ? 'red' : 'gray',
                                }}
                            />
                            <Text style={{color: focused ? 'red' : 'gray', fontSize:12}}>Cart</Text>
                        </View>;
                    },
    
                }}/>

除了tabBarBadgeStyle，一切都很好。请帮助我摆脱它。

"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",