需要访问React Native的Bottom Tab Navigator中的状态以实现购物车徽章

Question

是否有一种方法可以在“底部标签栏”导航器中访问redux状态，因此可以实现带有变量的徽章。这是将在底部标签栏上实施的徽章类型，尤其是购物车图标，以便可以指示购物车中的物品数量。

    Cart: {
      screen: Cart,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <IconBadge
            MainElement={
              <Image
               source={require("./assets/icons/Cart.png")}
               style={{ height: 24, width: 24, tintColor: tintColor }}
               />
            }
            BadgeElement={
              <Text style={{color:'#FFFFFF'}}>{this.state.BadgeCount}</Text>
            }
            IconBadgeStyle={
             {width:30,
              height:30,
              backgroundColor: '#FF00EE'}
            }
            Hidden={this.state.BadgeCount==0}   //how can we get access to state/props/cartItems in the bottom tab bar
          />
        )
      }
    },

Answer 1

我的解决方案是创建一个名为CartIcon的单独组件，该组件将连接到redux存储并将其设置为tabBarIcon。您可以如下创建CartIcon组件：

class CartIcon extends Component {
  render() {
    return (
      <IconBadge
        MainElement={
          <Image
            source={require("./assets/icons/Cart.png")}
            style={{ height: 24, width: 24, tintColor: tintColor }}
          />
        }
        BadgeElement={
          <Text style={{ color: '#FFFFFF' }}>{this.props.cartReducer.items.length}</Text>
        }
        IconBadgeStyle={
          {
            width: 30,
            height: 30,
            backgroundColor: '#FF00EE'
          }
        }
        Hidden={this.props.cartReducer.items.length === 0}   //how can we get access to state/props/cartItems in the bottom tab bar
      />
    );
  }
}

const mapStateToProps = (state) => ({
  cart: state.cartReducer
});

export default connect(mapStateToProps, null)(CartIcon);

现在，在路由器Cart组件中，作为该图标组件，如下所示：

Cart: {
  screen: Cart,
  navigationOptions: {
    tabBarIcon: ({ tintColor }) => (
      <CartIcon /> //set cart icon
    )
  }
},