Componente de navegación de pestañas de React Native

En este artículo, vamos a ver cómo implementar Tab Navigation en react-native. Para ello, vamos a utilizar el componente createBottomTabNavigator. Básicamente se utiliza para la navegación de una página a otra. En estos días, las aplicaciones móviles se componen de una sola pantalla, así que cree varios componentes de navegación en React Native. Queremos usar React Navigation.

Sintaxis:

const Tab = createBottomTabNavigator();
<Tab.Navigator >
   <Tab.Screen/>
</Tab.Navigator>

Accesorios en la navegación de pestañas:

• initialRouteName: Es la ruta inicial que se abre cuando se carga la aplicación.
• orden: Básicamente establece el orden de las pestañas.
• rutas: controla el mapeo de la pantalla de ruta a la configuración de la ruta.
• perezoso: si su valor es verdadero, la pestaña se representa cuando se activa por primera vez. Su valor predeterminado es verdadero.
• tabBarComponent: es un accesorio opcional. Anula el componente que se utiliza como barra de pestañas.
• tabBarOptions: Es un objeto de muchas propiedades como tabStyle, showLabel, showIcon, estilo, etc…

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 myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

• Paso 4: ahora instala react-navigation en tu proyecto. React Navigation se utiliza para navegar entre una página y otra. Instálalo usando el siguiente comando.

  npm install @react-navigation/native

• Paso 5: ahora instale las dependencias en su proyecto nativo de reacción usando el siguiente comando.

  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

• Paso 6: ahora instale las pestañas inferiores desde react-navigation.

  npm install @react-navigation/bottom-tabs

Para React Tab Navigation: Esto también se puede usar en React Native

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

Estructura del proyecto:

Ejemplo: ahora implementemos la navegación por pestañas.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } 
         from '@react-navigation/native';
import { createBottomTabNavigator } 
         from '@react-navigation/bottom-tabs';
  
function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', 
                   alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}
  
function Setting() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', 
                   alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
  
function Notification() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',
                   alignItems: 'center'}}>
      <Text>Notifications!</Text>
    </View>
  );
}
  
const Tab = createBottomTabNavigator();
  
export default function App() {
  return (
    <NavigationContainer >
      <Tab.Navigator initialRouteName={Home} >
        <Tab.Screen name="Home" component={Home}  />
        <Tab.Screen name="Notifications" 
                    component={Notification} />
        <Tab.Screen name="Settings" component={Setting} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

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://reactnative.dev/docs/navigation#react-navigation