Question

我在

上挣扎

import { createBottomTabNavigator } from 'react-navigation-tabs';

我想将我的cartItems的值从react redux传递到Bottom Navigation Icon，但从没有地方可以传递道具。这是我的代码，

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

静态4值图像显示在BottomTabNavigation中

Answer 1

您可以为标签图标创建一个单独的组件，并将其连接到redux。

这是未经测试的示例。

const TabIcon = (props) => {
    return (
        <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,
            }}>
                <Text style={{ color: 'white', fontWeight: 'bold' }}>{props.cartItems}</Text>
            </View>
            <Icon name="shopping-cart" color={props.tintColor} />
        </View >
    )
}

const mapStateToProps = state => {
    return {
        cartItems: state.carts.carts
    }
}

export default connect(mapStateToProps, null)(TabIcon)

然后您可以尝试以下操作：

tabBarIcon: ({ tintColor }) => (
        <TabIcon tintColor={tintColor}/>
  )

将props从react-redux传递到React Native底部标签导航

1 个答案: