将 Props 从 react-redux 传递到 React Native 底部选项卡导航

Question

我正在努力解决

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 值图像

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 底部选项卡导航

Pass Props from the react-redux to React Native Bottom Tab Navigation

tabnavigator

react-native

react-redux

react-native-tabnavigator

react-navigation-bottom-tab