Implementación de un decorador de escala en una lista plana arrastrable en React Native

Crear una experiencia visualmente interactiva y fácil de usar es clave para desarrollo de aplicaciones moviles. FlatList de React Native es muy versátil y eficiente, y se utiliza habitualmente para representar listas de gran tamaño. Con el beneficio añadido de la funcionalidad de arrastrar y soltar, puedes hacer que tu FlatList sea aún más atractiva. En este artículo, exploraremos cómo implementar una FlatList arrastrable en React Native, completa con un decorador de escala para hacer que los elementos aparezcan y respondan al tacto.

Requisitos previos

Antes de empezar, asegúrate de que tienes conocimientos básicos de React Native y cierta familiaridad con las animaciones en Reaccionar nativo. También necesitarás instalar las siguientes librerías:

1. react-native-reanimated - para animaciones.
2. react-native-gesture-handler - para gestionar los gestos táctiles.
3. react-native-draggable-flatlist - para la funcionalidad de listas arrastrables.

npm install react-native-reanimated react-native-gesture-handler react-native-draggable-flatlist

Paso 1: Configurar FlatList arrastrable

Comience importando los componentes necesarios y configurando un simple draggable FlatList.

import React from 'react';
import { StyleSheet, View, Text } de 'react-native';
import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';

const data = Array.from({ length: 10 }, (v, i) => ({
    clave: `artículo-${i}`,
    label: `Item ${i + 1}`,
}));

const DraggableList = () => {
    const [items, setItems] = React.useState(data);
    const renderItem = ({ item, drag, isActive }) => {
        return (
            
                
                    
                        {item.label}
                    
                
            
        );
    };
    return (
         setItems(datos)}
            keyExtractor={(item) => item.key}
            renderItem={renderItem}
        />
    );
};
export default DraggableList;

Esto es lo que ocurre:

1. Matriz de datos: Configuramos un array de elementos para renderizar en la lista.
2. DraggableFlatList Componente: Muestra una lista en la que se pueden arrastrar elementos.
3. Renderizar elemento: Cada elemento muestra texto y utiliza arrastre del render prop para permitir el arrastre al pulsar prolongadamente.
4. EscalaDecorador: Envuelve cada elemento de la lista y proporciona un efecto de escala cuando está activo.

Paso 2: Aplicar el decorador de escala

El EscalaDecorador de react-native-draggable-flatlist es una potente herramienta para proporcionar información visual sobre la selección de elementos. Configurar activeScale controla el tamaño de la escala cuando se arrastra un elemento.

>

En este ejemplo, la configuración de activeScale={1.1} escala el elemento a 110% de su tamaño original cuando está activo. Ajuste el factor de escala según sea necesario para su interfaz de usuario.

Paso 3: Añadir estilos personalizados

Mejore la apariencia y la interacción añadiendo algunos estilos personalizados.

const styles = StyleSheet.create({
  itemContainer: {
    relleno: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  text: {
    fontSize: 18,
    fontWeight: 'negrita',
  },
});

Estos estilos definen el relleno, el margen y los colores básicos, dando a cada elemento un aspecto similar al de una tarjeta.

Paso 4: Animaciones con react-native-reanimated (Opcional)

Si desea tener un mayor control sobre la escala o animar otras propiedades durante el arrastre, considere la posibilidad de integrar react-native-reanimated. He aquí un ejemplo rápido de cómo conseguir un efecto suave de entrada y salida de escala con Reanimado.

1. Instala Reanimated e impórtalo.
2. Envuelva cada artículo en un Animado.Verdonde el valor de la escala cambia en función del estado de arrastre.

import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';

const renderItem = ({ item, drag, isActive }) => {
  const scale = isActive ? withSpring(1.1) : withSpring(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transformar: [{ scale }],
  }));

  return (
    
      
        {item.label}
      
    
  );
};

Pruebas y resolución de problemas

Ejecute la aplicación en un dispositivo o emulador y pruebe la función de arrastrar y soltar manteniendo pulsado un elemento y moviéndolo a continuación.

Consejos

• Experimente con activeScale en EscalaDecorador para la escala ideal.
• Ajuste el relleno y el margen de los elementos para crear una disposición que se adapte a su diseño.
• Utilice conMuelle() en Reanimated para una transición suave de escala a escala.

Conclusión

Añadir un arrastrable FlatList con un decorador de escala en Reaccionar nativo mejora la interacción con el usuario proporcionándole información visual y creando una experiencia fluida de arrastrar y soltar. Ya sea para una lista de tareas pendientes, un gestor de tareas o incluso una interfaz de usuario de reordenación, el decorador de escala hace que la aplicación parezca pulida y receptiva.

Combinando react-native-draggable-flatlist, ScaleDecorator, y animaciones Reanimated opcionales, puede crear una lista dinámica e interactiva que destaque. Ya está listo para implementar una lista atractiva y fácil de arrastrar que encantará a los usuarios.