我正在努力解决
import { createBottomTabNavigator } from 'react-navigation-tabs';
我想将我的 cartItems 的值从 react redux 传递到底部导航图标,但我无法从任何地方传递道具。这是我的代码,
import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'src/containers/IconTabbar';
import Home from 'src/screens/home/home';
import Cart from 'src/screens/cart/cart';
import { connect } from 'react-redux';
const Tabs = createBottomTabNavigator(
{
home: {
screen: Home,
navigationOptions: () => ({
title: 'Home',
tabBarIcon: ({ tintColor }) => <Icon name="home" color={tintColor} />,
}),
},
cart: {
screen: Cart,
navigationOptions: () => ({
title: 'Cart',
tabBarIcon: ({ tintColor }) => <View>
<View style={{ position: 'absolute', height: 20, width: 20, borderRadius: 15, backgroundColor: 'rgba(95,197,123,0.8)', right: 10, bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000, }}>
//Here I want add props instead of 4 like this.props.cartItems
<Text style={{ color: 'white', fontWeight: 'bold' }}>4</Text>
</View>
<Icon name="shopping-cart" color={tintColor} />
</View>,
}),
},
},
{
defaultNavigationOptions: props => {
return {
tabBarOptions: {
style: {
height: 60,
elevation: 0,
borderTopWidth: 1,
},
activeTintColor: 'green',
inactiveTintColor: 'grey',
},
};
},
}
);
const mapStateToProps = (state) => {
return {
cartItems: state.carts.carts
}
}
export default connect(mapStateToProps)(Tabs);
在 BottomTabNavigation 中显示的静态 4 值的图像