No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Agregando tabs de navegación

15/22
Recursos

Dependencias:
npm install @react-navigation/bottom-tabs

Aportes 15

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Revisando la documentación la propiedad tintColor no se encuentra en tabBarOptions, en su lugar esta disponible tanto para android como IOS activeTintColor e inactiveTintColor

Ver documentación de tabNavigator

Yo tenía el problema de que me estaba duplicando el top header, pueden utilizar esto si es que usan screenOptions.

<<Tab.Navigator
        screenOptions={{
          tabBarStyle:{
            backgroundColor: colors.blackPearl
          },
          headerShown: false
        }}
      >> 

Por alguna razón, no me aparece el icono del Tabs.Screen (bank.png)

import React from 'react';
import {Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import CoinsStack from 'cryptoTracker/src/components/coins/CoinsStack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Colors from 'cryptoTracker/src/res/colors';

const Tabs = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tabs.Navigator 
       tabBarOptions={{
         tintColor: "#fefefe",
         style: {
         backgroundColor: Colors.blackPearl
         }
       }}
      >
        <Tabs.Screen 
        name="BANK" 
        component={CoinsStack} 
        options={{
            tabBarIcon: ({size,color}) => {
              <Image 
              style={{tintColor: color, width:size, height:size}}
              source={require('cryptoTracker/src/assets/bank.png')} 
              />  
             }
           }}
        /> 

      </Tabs.Navigator>
    </NavigationContainer>
  )
};
 
export default App;

muchas gracias, el curso me a ayudado muchisimo 😄

Ha cambiado un poco la cosa, ahora hay que meterlo todo dentro de screenOptions

<Tabs.Navigator
        screenOptions={{
          tabBarActiveTintColor: "#fefefe",
          tabBarStyle: [
            {
              backgroundColor: Colors.blackPearl,
            },
          ],
        }}
      >

Tabs ayudan a tener multiples stacks, lo que permite mantener el estado de una tab de forma simple.

A mi no se me aplicaron los estilos, al parecer porque tabBarOptions está obsoleto, lo solucioné con screenOptions de la siguiente manera

<NavigationContainer>
    <Tabs.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#fefefe',
        tabBarActiveBackgroundColor: colors.blackPearl,
        tabBarInactiveTintColor: "#FFF",
        tabBarInactiveBackgroundColor: "#527318"
      }}
    >

Hice algunas modificaciones ya que me aparece el error "tabBarOptions depracated"
Ahora se usa screenOptions y me quedo así (espero les sirva )

import React from 'react';
import { Image } from "react-native"
import { NavigationContainer } from '@react-navigation/native';
import CoinsStack from './src/components/coins/CoinsStack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Colors from "./src/res/colors"

const Tabs = createBottomTabNavigator()

const App = () => {
  return (
    <NavigationContainer>
      <Tabs.Navigator
        screenOptions={{
          tabBarActiveTintColor: "#FFF",
          tabBarInactiveTintColor: Colors.blackPearl,
          tabBarStyle:{
            backgroundColor: Colors.blackPearl
          }
        }}
      >
          <Tabs.Screen
            name="Coins"
            component={CoinsStack}
            options={{
              tabBarIcon: ({ size, color }) => (
                <Image
                  style={ {tintColor: color, width: size, height: size} }
                  source={require("./src/assets/bank.png")}
                 
                />
              )
            }}
          />
      </Tabs.Navigator>
    </NavigationContainer>
  );
};

export default App;

tuve 2 problemas al agregar la navegación, la primera fue que la forma que utiliza el profesor en este curso para las propiedades de la bottom navigation ya están deprecadas, la segunda fue que la navbar se duplicó ya que las librerías de stack y de bottom navigation trabajan como diferentes, yo lo solucione de esta forma, OJO… aun no termino el curso así que no estoy seguro si esta solución afecte en el futuro.

solución al primer problema:

esta es la forma mas actual de agregar estilos y modificar cosas a la bottom bar

<Tabs.Navigator
        screenOptions={{
          headerShown: false,
          "tabBarActiveTintColor": "#fff",
          "tabBarItemStyle":[
            {
              borderRadius: 10
            }
          ],
          "tabBarStyle":[
            {
              backgroundColor: '#000'
            }
          ]
        }}
      >

Solución segundo problema:

Como se ve arriba le agregue esta propiedad que deshabilita el header de la ventana.

ScreenOptions={{
          headerShown: false,
}}

Espero y les ayude, suerte en su curso 😄

Actualmente tabBarOptions está deprecado, en su lugar para aplicar estilos a todo el grupo del navigator se debe utilizar screenOptions, y para cambiar el background de los tabs se puede utilizar de la siguiente manera:

<Tab.Navigator
        screenOptions={{
          tabBarStyle:{
            backgroundColor:COLORS.blackPearl
          }
        }}
>

Si los iconos no están apareciendo, les aconsejo que revisen bien si están utilizando de manera correcta los {} o los ().

Que buenos son los cursos de react js y react native, lastima que todos ustedes no sepan lo que es un hook, ningún profesor de platzi a hecho un curso donde los utilice.

npm install @react-navigation/bottom-tabs

no me aparecen mis iconos abajo, que puede ser?