Перейдите Реквизит от Реакции-Избыточности в Реагирующую Навигацию по Родной Нижней Вкладке - PullRequest
Новая
       89

Перейдите Реквизит от Реакции-Избыточности в Реагирующую Навигацию по Родной Нижней Вкладке

1 голос
/ 11 апреля 2020

Я борюсь с 

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

Я хочу передать значение своих cartItems от реактивного редукса в 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);

Изображение Стати c 4 Отображение значения в BottomTabNavigation

1 Ответ

1 голос
/ 11 апреля 2020

Вы можете создать отдельный компонент для значка вкладки и подключить его к 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}/>
  )
...