Dise帽ando la Tab navigation con iconos

3/17
Recursos

Aportes 7

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

A mi no me cargaban los iconos, lo solucione de la siguiente manera:

//En el documento en la ruta: './android/app/build.gradle, agregu茅 la la linea:
apply from:("../../node_modules/react-native-vector-icons/fonts.gradle");

//justo por encima de esta linea:
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); 

Si a alguien le tira error a los con los iconos intente esto
Instalar dependencia鈥>
npm i react-native-vector-icons
y luego todo el procedimiento normal del video
Ejemplo鈥>
import Icon from 鈥榬eact-native-vector-icons/FontAwesome5鈥;
<Tab.Screen
name="Favorite"
component={FavoriteScreen}
options={{
tabBarLabel: 鈥淔avoritos鈥,
//tabBarBadge: 3,
tabBarIcon: ({color, size}) => (
<Icon name=鈥渉eart鈥 color= {color} size={size}/>
),
}}
/>

Se puede escribir renderPokeball de esta manera para que se vea el codigo un poco mas conciso.

const renderPokeball = () => (
  <Image
    source={require("../assets/pokeball.png")}
    style={{ width: 75, height: 75, top: -15 }}
  />
)

no me funcionaban los iconos, otra forma de que aparescan era utilizar MaterialCommunityIcons : https://reactnavigation.org/docs/bottom-tab-navigator/#example

Para el manejo de tama帽os (En este caso tama帽o de la imagen) recomendar铆a hacerlo por porcentajes o con la librer铆a react-native-responsive-screen para que el dise帽o que hagan, se vea bien en multiples pantallas.

si le trae problema la importacion de los iconos usenla sin el @

import Icon from "react-native-vector-icons/FontAwesome5";

Si est谩n trabajando con Android y les dio error por tabBarIcon
yo importe

import Icon from "react-native-vector-icons/FontAwesome"; 

y funciono