¿Cómo agregar íconos en la parte inferior de la navegación de pestañas en React Native?

Agregar íconos en la parte inferior de la navegación de pestañas en React Native es una tarea bastante fácil. En este artículo, implementaremos una aplicación básica para aprender a usar íconos en nuestra pestaña de navegación. Para esto, primero debemos configurar la aplicación e instalar algunos paquetes.

Implementación: Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init tab-navigation-icons

 

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, íconos de navegación de pestañas

  cd tab-navigation-icons

Paso 4: instale los paquetes necesarios con el siguiente comando:

npm install --save react-navigation react-native-gesture-handler 
npm install --save react-native-vector-icons  

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Ahora, configuremos el Navegador de pestañas y agreguemos íconos, junto con algunos estilos CSS básicos para que los íconos se vean presentables. Habrá 3 pantallas en nuestra aplicación de demostración, a saber: pantalla de inicio, pantalla de usuario y pantalla de configuración. Así, tendremos 3 pestañas para navegar entre estas 3 pantallas, siendo nuestra Pantalla de Inicio la Pantalla predeterminada.

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
  
import HomeScreen from "./screens/HomeScreen";
import UserScreen from "./screens/UserScreen";
import SettingScreen from "./screens/SettingScreen";
  
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          <Ionicons
            name="md-home"
            size={24}
            color={tabInfo.focused ? "#006600" : "#8e8e93"}
          />
        );
      },
    },
  },
  User: {
    screen: UserScreen,
    navigationOptions: {
      tabBarLabel: "User",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          <Ionicons
            name="md-person-circle-outline"
            size={24}
            color={tabInfo.focused ? "#006600" : "#8e8e93"}
          />
        );
      },
    },
  },
  Setting: {
    screen: SettingScreen,
    navigationOptions: {
      tabBarLabel: "Setting",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          <Ionicons
            name="md-settings-outline"
            size={24}
            color={tabInfo.focused ? "#006600" : "#8e8e93"}
          />
        );
      },
    },
  },
});
  
const Navigator = createAppContainer(TabNavigator);
  
export default function App() {
  return (
    <Navigator>
      <HomeScreen />
    </Navigator>
  );
}

El código anterior contiene la lógica de nuestro Navegador de pestañas con íconos en la parte inferior de la Navegación de pestañas. Ahora, necesitamos las pantallas a las que debemos navegar.

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Home = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>
      <Ionicons name="md-home" size={80} color="#006600" />
    </View>
  );
};
  
export default Home;

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const User = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>User Screen!</Text>
      <Ionicons name="md-person-circle-outline" size={80} color="#006600" />
    </View>
  );
};
  
export default User;

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Settings = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>
      <Ionicons name="md-settings-outline" size={80} color="#006600" />
    </View>
  );
};
  
export default Settings;

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.

Referencia: https://reactnavigation.org/docs/tab-based-navigation/