¿Cómo agregar la función Ajustar a la alineación en FlatList en React Native?

React Native está acostumbrado a crear aplicaciones para plataformas Android e iOS. Le permite usar una base de código única para ambas plataformas. En React Native, el componente FlatList muestra datos estructurados de manera similar en una lista desplazable. Es la mejor opción si tiene una lista grande para renderizar. El componente FlatList solo muestra aquellos elementos que se muestran actualmente en la pantalla y no todos. A medida que el usuario se desplaza hacia abajo, muestra más elementos de la lista. Proporciona un mejor rendimiento que un ScrollView.

Ahora, hay un problema con un componente FlatList simple. Considere un escenario en el que tiene 100 elementos en su lista y ha utilizado un componente FlatList simple para representar la lista. En este escenario, la lista se puede desplazar libremente. Los usuarios pueden comenzar a desplazarse en cualquier momento y pueden dejar de desplazarse en cualquier momento. Este tipo de FlatList no tiene restricciones. Los usuarios pueden dejar de desplazarse incluso si la pantalla actual muestra dos elementos parciales de la lista. Puedes ver el siguiente ejemplo para entender el problema.

Lista plana normal:

Lista plana normal

Ahora, el componente FlatList proporciona una forma en la que un elemento de la lista se ajusta para alinear la pantalla. De esta forma, cuando el usuario intente pasar al siguiente elemento, el elemento anterior se eliminará de la pantalla y el siguiente elemento ocupará todo el espacio de la pantalla. Este tipo de función está implementada en muchas aplicaciones famosas. Vea el siguiente ejemplo de cómo funciona una FlatList con la función Ajustar a la alineación.

FlatList con la función Ajustar a la alineación:

FlatList con la función Ajustar a la alineación

Ahora, para resolver esto, React Native nos proporciona algunos accesorios que podemos usar con el componente FlatList. 

Enfoque: para agregar esta función en su aplicación React Native, debe pasar 3 accesorios al componente FlatList.

1. ajustar a la alineación
2. tasa de desaceleración
3. ajustar a intervalo

snapToAlignment: cuando se establece snapToInterval, snapToAlignment definirá la relación del ajuste con la vista de desplazamiento.

• inicio (predeterminado) alineará el ajuste a la izquierda (horizontal) o arriba (vertical)
• centro alineará el complemento en el centro
• el extremo alineará el complemento a la derecha (horizontal) o al fondo (vertical)

decelerationRate: un número de punto flotante que determina qué tan rápido se desacelera la vista de desplazamiento después de que el usuario levanta el dedo. También puede usar atajos de string «normal» y «rápido».

snapToInterval: cuando se establece, hace que la vista de desplazamiento se detenga en múltiplos del valor de snapToInterval. Se usa en combinación con snapToAlignment y decelerationRate=”fast”.

Crear aplicación:

Paso 1: Abra su Terminal y ejecute el siguiente comando. Instalará Expo CLI globalmente en su sistema.

npm install -g expo-cli

Paso 2: ahora, cree un nuevo proyecto nativo de React ejecutando el siguiente comando.

expo init "Your_Project_Name"

Paso 3: Ahora vaya a la carpeta del proyecto y ejecute el siguiente comando para iniciar el servidor.

cd "Your_Project_Name"
npm start

Paso 4: Se le pedirá que elija una plantilla. Seleccione la plantilla en blanco.

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ahora crearemos 2 ejemplos en este caso. La primera será una FlatList de desplazamiento vertical y la segunda será una FlatList de desplazamiento horizontal. Crearemos un componente personalizado llamado GeeksforGeeks que representaremos varias veces en FlatList. 

Cree un nuevo archivo llamado GeeksforGeeks.js: este archivo es un componente personalizado que representaremos en FlatList. 

Componente GeeksforGeeks

Ejemplo 1: en este ejemplo, crearemos una FlatList desplazable verticalmente en React Native.

Paso 1: abra el archivo GeeksforGeeks.js y escriba el código a continuación en ese archivo. Tiene un componente de texto en el que representamos la string que pasamos en FlatList. El texto se mostrará en el centro de la pantalla. La altura y el ancho de este componente serán las mismas que la altura y el ancho del dispositivo para que pueda ocupar todo el espacio disponible. Aparte de eso, proporcionamos algo de estilo al componente a través de Stylesheet. Este componente recibe un accesorio llamado nombre de FlatList en el archivo App.js y usaremos ese accesorio para representarlo en el componente Texto.

import { Dimensions, StyleSheet, Text, View } from "react-native";
import React from "react";
  
const GeeksforGeeks = (props) => {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>{props.name}</Text>
        </View>
    );
  };
  
export default GeeksforGeeks;
  
const styles = StyleSheet.create({
    container: {
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#3B5323",
        borderColor: "#000",
        borderWidth: 2,
        alignSelf: "center",
     },
    title: {
        color: "#fff",
        fontSize: 20,
     },
});

Paso 2: Abra el archivo App.js y escriba el siguiente código en ese archivo.

App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, crearemos un estado llamado elementos. El estado de este elemento será una array de objetos. Cada objeto tiene 2 propiedades, id y un nombre. Ambos serán de tipo string. Devolveremos un componente View que tiene una FlatList. Esta FlatList toma elementos como datos. Luego pasará el nombre de cada objeto al componente personalizado GeeksforGeeks que ya hemos creado. Cada elemento en FlatList tiene una identificación única para que pueda distinguirse entre sí. Ahora, proporcionamos la propiedad snapToAlignment para que FlatList ajuste cada elemento desde el principio. decelerationRate define la velocidad de ajuste, en este caso, lo definimos rápido. snapToInterval define el intervalo para la cuadrícula de alineación, ya que estamos creando una lista desplazable verticalmente,

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
import { useState } from "react";
import GeeksforGeeks from "./GeeksforGeeks";
  
export default function App() {
    const [items, setItems] = useState([
        {
            id: "1",
            name: "GeeksforGeeks View 1",
        },
        {
            id: "2",
            name: "GeeksforGeeks View 2",
        },
        {
            id: "3",
            name: "GeeksforGeeks View 3",
        },
        {
            id: "4",
            name: "GeeksforGeeks View 4",
        },
  ]);
    
    return (
        <View>
            <FlatList
                data={items}
                renderItem={({ item }) => <GeeksforGeeks name={item.name} />}
                keyExtractor={(item) => item.id}
                snapToAlignment="start"
                decelerationRate={"fast"}
                snapToInterval={Dimensions.get("window").height}
            />
        </View>
  );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

FlatList desplazable verticalmente

Ejemplo 2: en este ejemplo, crearemos FlatList desplazable horizontalmente en React Native.

Paso 1: el archivo GeeksforGeeks.js sigue siendo el mismo que el ejemplo anterior. Tiene un componente de texto en el que representamos la string que pasamos en FlatList. El texto se mostrará en el centro de la pantalla. La altura y el ancho de este componente serán las mismas que la altura y el ancho del dispositivo para que pueda ocupar todo el espacio disponible. Aparte de eso, proporcionamos algo de estilo al componente a través de Stylesheet. Este componente recibe un accesorio llamado nombre de FlatList en el archivo App.js y usaremos ese accesorio para representarlo en el componente Texto.

import { Dimensions, StyleSheet, Text, View } from "react-native";
import React from "react";
  
const GeeksforGeeks = (props) => {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>{props.name}</Text>
        </View>
    );
  };
  
export default GeeksforGeeks;
  
const styles = StyleSheet.create({
    container: {
        height: Dimensions.get("window").height,
        width: Dimensions.get("window").width,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#3B5323",
        borderColor: "#000",
        borderWidth: 2,
        alignSelf: "center",
     },
    title: {
        color: "#fff",
        fontSize: 20,
     },
});

Paso 2: abra el archivo App.js y escriba el código a continuación en ese archivo. App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, solo habrá un cambio, pero el resto del código sigue siendo el mismo que el archivo App.js anterior. De forma predeterminada, FlatList se podrá desplazar verticalmente como se indica arriba. Pero en este ejemplo, necesitamos que se desplace horizontalmente. Por lo tanto, proporcionamos un accesorio más llamado horizontal en FlatList. Este accesorio por defecto tiene un valor verdadero. También puede especificarlo manualmente. Con este accesorio, nuestra FlatList ahora se puede desplazar horizontalmente.    

import { StyleSheet, View, FlatList, Dimensions } from "react-native";
import { useState } from "react";
import GeeksforGeeks from "./GeeksforGeeks";
  
export default function App() {
    const [items, setItems] = useState([
        {
            id: "1",
            name: "GeeksforGeeks View 1",
        },
        {
            id: "2",
            name: "GeeksforGeeks View 2",
        },
        {
            id: "3",
            name: "GeeksforGeeks View 3",
        },
        {
            id: "4",
            name: "GeeksforGeeks View 4",
        },
  ]);
    
    return (
        <View>
            <FlatList
                data={items}
                renderItem={({ item }) => <GeeksforGeeks name={item.name} />}
                keyExtractor={(item) => item.id}
                snapToAlignment="start"
                decelerationRate={"fast"}
                snapToInterval={Dimensions.get("window").width}
                horizontal
            />
        </View>
  );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

Producción:

FlatList desplazable horizontalmente