Navegador de pestañas superiores de React Native

Posted on by Rudeus Greyrat

Para crear un Navegador de pestañas superior, necesitamos usar la función createMaterialTopTabNavigator disponible en la biblioteca de navegación reactiva. Está diseñado con la barra de pestañas del tema material en la parte superior de la pantalla. Permite cambiar entre varias pestañas tocándolas o deslizándolas horizontalmente. Las animaciones de transición predeterminadas están disponibles.

Props: En React Native, cuando se crean los componentes, se deben personalizar de acuerdo con la necesidad de que las propiedades se llamen props.

  • initialRouteName: initialRouteName son los accesorios que se utilizan para enrutar el nombre que se representa en la carga inicial del navegador.
  • screenOptions: screenOptions son los accesorios en React Native que se usan como opciones predeterminadas para las pantallas dentro del navegador. La opción predeterminada se utiliza para aplicar todos los navegadores de pantalla.
  • tabBarPosition: este tipo de accesorio se utiliza para establecer la posición de la barra de pestañas en la vista de pestañas con el valor predeterminado establecido en la parte superior.
  • perezoso: los accesorios perezosos se utilizan para verificar si el valor booleano indica si las pantallas se renderizarán de forma perezosa o no. De forma predeterminada, la pantalla se muestra en la experiencia de la ventana gráfica.
  • lazyPlaceholder: El lazyPlaceholder props en React Native una función que devuelve un elemento React para que se represente para aquellas rutas que aún no se han representado. De forma predeterminada, el valor de representación es nulo.
  • removeClippedSubviews: removeClippedSubviewsa se utiliza para mejorar la jerarquía de la memoria. Toma el valor booleano que indica si se eliminan las vistas invisibles de la jerarquía de vistas.
  • keyboardDismissMode:   esta propiedad se usa para tomar el valor de la string que indica si el teclado se descarta como respuesta al gesto de arrastrar. Los otros valores en el modo Descartar del teclado son automático, al arrastrar, ninguno.
  • timingConfig: timingConfig los accesorios cronometran un objeto de configuración utilizado para la animación de cronometraje, que ocurre cuando se presionan las pestañas. Las otras propiedades de timingConfig son la duración y el número.
  • posición: un valor animado utilizado para escuchar las actualizaciones de posición. De vez en cuando, cambiará cuando el usuario presione las pestañas.

Opciones: Las opciones en React Native se utilizan con fines de configuración. La configuración se ejecuta al configurar

  • título: el título de la opción se usa generalmente como respaldo para el título del encabezado y la etiqueta de la barra de tabulación.
  • tabBarIcon: las opciones de tabBarIcon devuelven React. Un Node que se usa para mostrar en la sección de la barra de pestañas es color: string en el widget nativo de React.
  • tabBarLabel: ThetabBarLabel en la string de título de una pestaña que se muestra en la sección de la barra de pestañas del widget de la pantalla en React Native.
  • tabBarAccessibilityLabel: Es una opción que puede ser una etiqueta de accesibilidad que lee el lector de pantalla cuando el usuario presiona la pestaña.
  • tabBarTestID: la opción tabBarTestID puede ser una identificación utilizada para ubicar este botón de pestaña en las pruebas.

Eventos: 

  • tabPress: el conjunto de eventos tabPress se apaga cuando el usuario presiona el botón de pestaña de la pantalla actual en la sección de la barra de pestañas. Por defecto, se utiliza cuando
  • tabLongPress: el evento que se activa cuando el usuario presiona el botón de pestaña de la pantalla actual en la barra de pestañas durante un tiempo prolongado.

Ayudantes:

  • jumpTo: los auxiliares jumpTo se utilizan para ejecutar una función para navegar por una pantalla existente en el navegador de pestañas, que acepta nombres y params como sus argumentos, donde name es una string y params es un objeto.

Ahora veamos cómo crear un Navegador de pestañas superior:

  • 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 top-tab-navigator-demo

  • Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, top-tab-navigator-demo

    cd top-tab-navigator-demo

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

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

    •  

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

    Ejemplo: 

    Ahora, configuremos nuestro Navegador de pestañas superior en nuestro archivo App.js. 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.

    Ejemplo: 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.

    Aplicación.js

    import React from "react";
    import { Ionicons } from "@expo/vector-icons";
    import { createAppContainer } from "react-navigation";
    import { createMaterialTopTabNavigator } from "react-navigation-tabs";
      
    import ProfileScreen from "./screens/ProfileScreen";
    import ImagesScreen from "./screens/ImagesScreen";
    import VideoScreen from "./screens/VideosScreen";
      
    const TabNavigator = createMaterialTopTabNavigator(
      {
        Profile: {
          screen: ProfileScreen,
          navigationOptions: {
            tabBarLabel: "Profile",
            showLabel: ({ focused }) => {
              console.log(focused);
              return focused ? true : false;
            },
            tabBarIcon: (tabInfo) => (
              <Ionicons
                name="ios-person-circle-outline"
                size={tabInfo.focused ? 25 : 20}
                color={tabInfo.tintColor}
              />
            ),
          },
        },
        Images: {
          screen: ImagesScreen,
          navigationOptions: {
            tabBarLabel: "Images",
            tabBarIcon: (tabInfo) => (
              <Ionicons
                name="ios-images-outline"
                size={tabInfo.focused ? 24 : 20}
                color={tabInfo.tintColor}
              />
            ),
          },
        },
        Video: {
          screen: VideoScreen,
          navigationOptions: {
            tabBarLabel: "Videos",
            tabBarIcon: (tabInfo) => (
              <Ionicons
                name="ios-videocam-outline"
                size={tabInfo.focused ? 25 : 20}
                color={tabInfo.tintColor}
              />
            ),
          },
        },
      },
      {
        tabBarOptions: {
          showIcon: true,
      
          style: {
            backgroundColor: "#006600",
            marginTop: 28,
          },
        },
      }
    );
      
    const Navigator = createAppContainer(TabNavigator);
      
    export default function App() {
      return (
        <Navigator>
          <ProfileScreen />
        </Navigator>
      );
    }

    Perfil.js

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

    Imágenes.js

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

    Videos.js

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

    Inicie el servidor utilizando el siguiente comando.

expo start

Producción:

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

Publicación traducida automáticamente

Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *