El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos a implementar la navegación por pestañas en una aplicación de React Native utilizando la biblioteca React Navigation. La navegación por pestañas es una forma común de organizar la navegación en aplicaciones móviles, permitiendo a los usuarios cambiar entre diferentes vistas o secciones de la aplicación mediante pestañas en la parte inferior o superior de la pantalla.

Objetivos de Aprendizaje

Comprender qué es un navegador de pestañas y cuándo usarlo.
Configurar un navegador de pestañas en una aplicación de React Native.
Personalizar las pestañas con iconos y etiquetas.
Manejar la navegación entre diferentes pantallas usando pestañas.

Requisitos Previos

Conocimiento básico de React Native.
Familiaridad con la configuración de React Navigation (ver lección 04-01).

Instalación de Dependencias

Antes de comenzar, asegúrate de tener instaladas las siguientes dependencias:

npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

Configuración Básica

Primero, configura el contenedor de navegación en tu archivo principal (por ejemplo, App.js):

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

En este ejemplo, hemos creado un navegador de pestañas con dos pantallas: HomeScreen y SettingsScreen.

Creación de Pantallas

Crea las pantallas HomeScreen y SettingsScreen en la carpeta screens:

HomeScreen.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

SettingsScreen.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Personalización de Pestañas

Puedes personalizar las pestañas añadiendo iconos y etiquetas. Para esto, puedes usar la biblioteca react-native-vector-icons:

npm install react-native-vector-icons

Luego, modifica el archivo App.js para incluir iconos en las pestañas:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'settings' : 'settings-outline';
            }

            return <Icon name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

En este ejemplo, hemos añadido iconos a las pestañas utilizando react-native-vector-icons/Ionicons. Los iconos cambian según si la pestaña está activa o inactiva.

Ejercicio Práctico

Ejercicio 1: Añadir una Nueva Pestaña

Crea una nueva pantalla llamada ProfileScreen.js en la carpeta screens.
Añade la nueva pantalla al navegador de pestañas en App.js.
Personaliza la pestaña con un icono adecuado.

Solución

ProfileScreen.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileScreen() {
  return (
    <View style={styles.container}>
      <Text>Profile Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import ProfileScreen from './screens/ProfileScreen';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'settings' : 'settings-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person-outline';
            }

            return <Icon name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Conclusión

En esta lección, hemos aprendido a configurar y personalizar un navegador de pestañas en una aplicación de React Native. Ahora deberías ser capaz de:

Configurar un navegador de pestañas básico.
Añadir y personalizar iconos y etiquetas en las pestañas.
Navegar entre diferentes pantallas usando pestañas.

En la próxima lección, exploraremos el Navegador de Cajón, otra forma popular de navegación en aplicaciones móviles.

Navegador de Pestañas

Objetivos de Aprendizaje

Requisitos Previos

Instalación de Dependencias

Configuración Básica

Creación de Pantallas

HomeScreen.js

SettingsScreen.js

Personalización de Pestañas

Ejercicio Práctico

Ejercicio 1: Añadir una Nueva Pestaña

Solución

ProfileScreen.js

App.js

Conclusión

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real