javascript - 需要访问 React Native 中底部选项卡导航器中的状态以实现购物车徽章

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