Значок настраиваемой панели вкладок React Native Navigation

Возможно ли иметь собственный компонент (кнопку или что-то еще) вместо простого значка на панели вкладок?

Мне нужно динамически установить значок панели вкладок, как это

this.props.navigator.setTabButton({
          tabIndex: 0,
          icon: <Icon name="heart" size={28} />  <--- not appear    
        });

ИЛИ мы можем использовать только иконки? Какие-нибудь решения?


react-native react-native-ios react-native-android react-native-navigation
person Андрей Гузюк    schedule 14.12.2017    source источник
comment
эй, ты нашел какое-нибудь решение этой проблемы?   -  person Rawan    schedule 04.04.2018
comment
@Rawan, у тебя так не получится. Все, что ты можешь, это установить значок при установке роутера.   -  person Андрей Гузюк    schedule 04.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Да, это возможно. Я делюсь своим решением в виде кода ниже:

const renderNav = (routeName, focused) => {
    return (
        <View style={{
            flex: 1,
            width: 90,
            justifyContent: 'center',
            alignItems: 'center',
            borderTopColor: StylesGeneric.COLORS.primary,
            borderTopWidth: focused ? 4 : 0,
        }}>
            <Text
                style={[StylesGeneric.STYLES.footerText]}>
                {routeName}
            </Text>
        </View>
    );
};

const customTabs = ({navigation}) => ({
    tabBarIcon: ({focused}) => {
        const {routeName} = navigation.state;
        if (routeName === 'Home') {
            return renderNav('Home', focused);
        } else if (routeName === 'Profile') {
            return renderNav('Profile', focused);
        } else if (routeName === 'ProfileOther') {
            return renderNav('ProfileOther', focused);
        }
    },
});

const nav = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
        },
        Profile: {
            screen: Profile,
        },
        ProfileOther: {
            screen: ProfileOther,
        },
    },
    {
        defaultNavigationOptions: customTabs,
        animationEnabled: true,
        swipeEnabled: true,
        tabBarPosition: 'bottom',
        initialRouteName: 'Home',
        tabBarOptions: {
            showLabel: false,
            style: {
                borderTopColor: 'transparent',
                backgroundColor: StylesGeneric.COLORS.white,
                height: StylesGeneric.FOOTER_HEIGHT,
            },
        },
    },
);

const AppContainer = createAppContainer(nav);

person jeadonara    schedule 23.11.2019
comment
Спасибо за попытку! К сожалению, ваш код предназначен для React Navigation, но я спросил о React Native Navigation. - person Андрей Гузюк; 25.11.2019
comment
@ АндрейГузюк Поскольку я использую эту библиотеку для проектов React Native, я не посмотрел точное название библиотеки. Извините за недопонимание. - person jeadonara; 29.11.2019