从 react-redux 传递 Props 到 React Native 底部标签导航答案

【问题标题】：Pass Props from the react-redux to React Native Bottom Tab Navigation从 react-redux 传递 Props 到 React Native 底部标签导航
【发布时间】：2020-04-10 22:11:40
【问题描述】：

我正在努力解决

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

【问题讨论】：

标签： react-native react-redux tabnavigator react-native-tabnavigator react-navigation-bottom-tab

【解决方案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}/>
  )

【讨论】：

感谢这个解决方案，它非常有帮助，但在我的情况下，我想在从购物车（购物车组件）中删除项目后重新渲染底部标签栏，因为我的焦点标签是购物车，这里是购物车组件渲染在哪个组件中，我调度了从购物车中删除项目的操作，并且我还从我的 Tabicon 组件中的 redux 获取状态。我对重新渲染底部标签栏感到不安。
@AjayBatham 如果您的选项卡图标组件连接到 redux，请尝试使用来自 redux 的值，例如 cartCount。它应该能够在removeItemsFromCart 操作更新 redux 状态后选择更新的值。