Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se
0
respostas

Mudando o tamanho da fonte do texto e o tamanho do ícone do menu inferior

Tentei alterar o tamanho do ícone, usando a mesma solução para alteração do tamanho da fonte, mas, no caso do Icon, não funcionou. Funcionou somente para a Label

Solução:

import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../assets/home.svg';
import Coracao from '../assets/coracao.svg';

import ProdutorRotas from './ProdutorRotas';
import MelhoresProdutoresRotas from './MelhoresProdutoresRotas';

const Tab = createBottomTabNavigator();

export default function AppRotas() {
    return <NavigationContainer>
                <Tab.Navigator
                        screenOptions={({ route }) => ({
                            headerShown: false,
                            tabBarIcon: ({ color }) => {
                                let Icon = Home;

                                if (route.name === 'Melhores Produtores') {
                                    Icon = Coracao;
                                }

                                return <Icon color={color} />;
                            },
                            tabBarActiveTintColor: '#2A9F85',
                            tabBarInactiveTintColor: 'gray',
                            tabBarLabelStyle: estilos.textoAba, 
                            tabBarIconStyle: estilos.iconeAba,
                        })}>
                    <Tab.Screen name='Home' component={ProdutorRotas} />
                    <Tab.Screen name='Melhores Produtores' component={MelhoresProdutoresRotas} />
                </Tab.Navigator>
           </NavigationContainer>
}

const estilos = StyleSheet.create({
    iconeAba: {
        width: 64,
        height: 64,
    },
    textoAba: {
        fontSize: 14,
        lineHeight: 15,
        marginBottom: 4,
    }
});

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software