需要在 React Native 的 Bottom Tab Navigator 中访问 state 来实现 Cart Badge

Question

Is there a way to possibly access the redux state in the Bottom Tab Bar Navigator so a badge that takes a variable can be implemented. This is the type of badge that is to be implemented on a bottom tab bar, particularly the cart icon so it can indicate the number of items in the cart.

    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

My solution is create a separate component called CartIcon which will be connected to the redux store and set this as tabBarIcon . You can create CartIcon component as below :

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);

Now, In your router Cart component as that icon component as below :

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

Answer 2

I faced the same situation and find a solution using DeviceEventEmitter

Listner in the bottom nav

const [count, setCount] = React.useState();

DeviceEventEmitter.addListener('newValue', v => {
    v != undefined ? setCount(v) : null;
});

updated that count using

DeviceEventEmitter.emit('newValue', 5); // value is 5

✌