react-native - 如果在 react-native CLI 中的选项卡焦点上删除记录，则 TabIcon 计数不会更新

Question

关于我的问题：映射视图未在 react-native 的选项卡导航器上更新，我添加了从购物车中删除产品的功能。是的，删除后购物车视图正在减少，但 tabicon 徽章计数仍在最后一次计数，直到我按下购物车以外的任何选项卡。

要将产品购物车添加到对象，是的，它将相应地更新计数。就在从对象中删除记录时，计数不会更新。

我在购物车屏幕上的脚本遵循链接发布的建议：-

componentDidUpdate(prevProps) {
  if (prevProps.isFocused !== this.props.isFocused) {
    this.setState({ prodData: appGlobal.ObjProduct });
  }
}
shouldComponentUpdate(nextProps, nextState) {
  if (this.props.prodData !== nextState.prodData) {
    return true;
  }
  return false;
}

在 TabHelpers 类上：-

const tabScreen = createBottomTabNavigator(
    {
        'Home': {
            screen: homeStack,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <Icon name='home' size={20} color={tintColor} />
                ),
            },
        },
        'Favourite': {
            screen: favStack,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <Icon name='heart' size={20} color={tintColor} />
                ),
            },
        },
        'Cart': {
            screen: cartStack,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon name='shopping-cart' size={20} color={tintColor} />
                        {typeof appGlobal.ObjProduct !== 'undefined' && appGlobal.ObjProduct.length > 0 ?
                            <Badge style={{ position: 'absolute', right: 10, top: 0, height: 13 }}>
                                <Text style={{ color: 'white', fontSize: 8 }}>{appGlobal.ObjProduct.length}</Text>
                            </Badge>
                            : null}
                    </View>
                ),
            },
        },
        'Profile': {
            screen: profileStack,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <Icon name='user' size={20} color={tintColor} />
                ),
            },
        }
    },
    {
        initialRouteName: 'Home',
        headerMode: 'none',
        lazy: false,
        backBehavior: 'initialRoute',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            showLabel: true,
            showIcon: true,
            activeTintColor: '#ffffff',
            activeBackgroundColor: '#4961c4',
            inactiveTintColor: '#4962a6',
            style: {
                backgroundColor: '#475691',
            },
            labelStyle: {
                textAlign: 'center',
                fontWeight: 'bold',
            },
            indicatorStyle: {
                borderBottomColor: '#FFFFFF',
                borderBottomWidth: 2,
            },
        },
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarOnPress: ({ navigation, defaultHandler }) => {
                navigation.popToTop();
                defaultHandler();
            },
        }),
    }
);

export default createAppContainer(tabScreen);

我错过了什么或错误地申请了吗？

标签： react-native