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

Creating a visually interactive and user-friendly experience is key in desarrollo de aplicaciones moviles. React Native’s FlatList is highly versatile and efficient, commonly used for rendering large lists. With the added benefit of drag-and-drop functionality, you can make your FlatList even more engaging. In this article, we’ll explore how to implement a draggable FlatList in React Native, complete with a scale decorator to make items pop and respond to touch.

Requisitos previos

Before starting, ensure you have basic knowledge of React Native and some familiarity with animations in Reaccionar nativo. You’ll also need to install the following libraries:

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 with a scale decorator in Reaccionar nativo enhances user interaction by giving visual feedback and creating a seamless drag-and-drop experience. Whether for a to-do list, task manager, or even a reordering UI, the scale decorator makes the app feel polished and responsive.

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.