¿Cómo crear el Navegador de pestañas inferiores de material en React Native?

Para crear un Navegador de pestaña inferior usando Material, necesitamos usar la función createMaterialBottomTabNavigator disponible en la biblioteca de navegación reactiva. Está diseñado con la barra de pestañas del tema material en la parte inferior de la pantalla. Le proporciona funciones de interfaz de usuario agradables y le permite cambiar entre diferentes rutas con animación. Lo más destacado de Material Bottom Tab Navigator es que las rutas se «inicializan de forma diferida», es decir, los componentes de pantalla correspondientes a las rutas no se montan hasta que se enfocan.

Creación de aplicaciones e instalación de módulos:

• 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 demo-app

 

• Paso 3: Ahora ve a la carpeta de tu proyecto iedem-app

  cd demo-app

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

  npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons

Estructura del proyecto: el directorio del proyecto debe tener el siguiente aspecto:

Estructura del proyecto

Ejemplo: Ahora, configuremos nuestro Navegador de pestañas inferiores de material, junto con algunos estilos básicos de CSS. Habrá 3 pantallas en nuestra aplicación de demostración: Pantalla de inicio, Pantalla de usuario y Pantalla de configuración. Así, tendremos 3 pestañas para navegar entre estas 3 pantallas. Primero, agregaremos nuestro archivo App.js que contendrá la lógica del Navegador de la pestaña inferior del material. Junto con la información básica sobre la pantalla y la etiqueta, también agregaremos íconos y estilos básicos mientras lo configuramos.

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from
    "react-navigation-material-bottom-tabs";
  
import HomeScreen from "./screens/HomeScreen";
import UserScreen from "./screens/UserScreen";
import SettingScreen from "./screens/SettingScreen";
  
const TabNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: (tabInfo) => (
          <Ionicons
            name="md-home"
            size={tabInfo.focused ? 26 : 20}
            color={tabInfo.tintColor}
          />
        ),
      },
    },
    User: {
      screen: UserScreen,
      navigationOptions: {
        tabBarLabel: "User",
        tabBarIcon: (tabInfo) => (
          <Ionicons
            name="md-person-circle-outline"
            size={tabInfo.focused ? 26 : 20}
            color={tabInfo.tintColor}
          />
        ),
      },
    },
    Setting: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: "Setting",
        tabBarIcon: (tabInfo) => (
          <Ionicons
            name="md-settings-outline"
            size={tabInfo.focused ? 26 : 20}
            color={tabInfo.tintColor}
          />
        ),
      },
    },
  },
  {
    initialRouteName: "Home",
    barStyle: { backgroundColor: "#006600" },
  }
);
  
const Navigator = createAppContainer(TabNavigator);
  
export default function App() {
  return (
    <Navigator>
      <HomeScreen />
    </Navigator>
  );
}

Ahora, necesitamos las tres pantallas a las que navegaremos.

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;

Ejecute el archivo: inicie el servidor con el siguiente comando.

expo start

Salida: observe que cuando toca una sola pestaña, hay una ligera animación. Esto lo proporciona automáticamente el Navegador de la pestaña inferior del material.

Producción

Referencia: https://reactnavigation.org/docs/material-bottom-tab-navigator/