Implementierung eines Skalen-Dekorators in einer Draggable FlatList in React Native

Die Schaffung einer visuell interaktiven und benutzerfreundlichen Erfahrung ist der Schlüssel zu Entwicklung mobiler Apps. Die FlatList von React Native ist äußerst vielseitig und effizient und wird häufig zum Rendern großer Listen verwendet. Mit dem zusätzlichen Vorteil der Drag-and-Drop-Funktionalität können Sie Ihre FlatList noch ansprechender gestalten. In diesem Artikel zeigen wir Ihnen, wie Sie eine ziehbare FlatList in React Native implementieren, komplett mit einem Scale-Dekorator, um Elemente auftauchen zu lassen und auf Berührungen zu reagieren.

Voraussetzungen

Bevor Sie beginnen, sollten Sie sicherstellen, dass Sie über grundlegende Kenntnisse von React Native verfügen und sich mit Animationen in Native reagieren. Außerdem müssen Sie die folgenden Bibliotheken installieren:

1. react-native-reanimated - für Animationen.
2. react-native-gesture-handler - für die Handhabung von Berührungsgesten.
3. react-native-draggable-flatlist - für ziehbare Listenfunktionen.

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

Schritt 1: Draggable FlatList einrichten

Beginnen Sie mit dem Import der erforderlichen Komponenten und dem Einrichten einer einfachen verschiebbaren FlatList.

importieren Sie React von 'react';
importiere { StyleSheet, Ansicht, Text } von 'react-native';
importiere DraggableFlatList, { ScaleDecorator } von 'react-native-draggable-flatlist';

const data = Array.from({ length: 10 }, (v, i) => ({
    key: `Element-${i}`,
    label: `Element ${i + 1}`,
}));

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

Es geht um Folgendes:

1. Daten-Array: Wir richten ein Array von Elementen ein, die in der Liste dargestellt werden sollen.
2. DraggableFlatList Komponente: Hier wird eine Liste angezeigt, in der Elemente gezogen werden können.
3. Gegenstand rendern: Jedes Element zeigt Text an und verwendet ziehen aus der Render-Requisite, um das Ziehen bei langem Drücken zu ermöglichen.
4. ScaleDecorator: Umhüllt jedes Listenelement und bietet einen Skalierungseffekt, wenn es aktiv ist.

Schritt 2: Anwenden des Skalen-Dekorators

Der ScaleDecorator aus react-native-draggable-flatlist ist ein leistungsfähiges Werkzeug, um visuelles Feedback zur Artikelauswahl zu geben. Einstellung activeScale steuert die Skalierungsgröße, wenn ein Element gezogen wird.

<ScaleDecorator activeScale={1.1}>

In diesem Beispiel ist die Einstellung activeScale={1.1} skaliert das Element auf 110% seiner ursprünglichen Größe, wenn es aktiv ist. Passen Sie den Skalierungsfaktor nach Bedarf für Ihre Benutzeroberfläche an.

Schritt 3: Benutzerdefinierte Stile hinzufügen

Verbessern Sie das Aussehen und die Interaktion, indem Sie einige benutzerdefinierte Stile hinzufügen.

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

Diese Stile definieren Auffüllungen, Ränder und Grundfarben und verleihen jedem Element ein kartenähnliches Aussehen.

Schritt 4: Animationen mit react-native-reanimated (fakultativ)

Wenn Sie mehr Kontrolle über die Skalierung wünschen oder andere Eigenschaften während des Ziehens animieren möchten, sollten Sie die Integration von react-native-reanimated. Hier ein kurzes Beispiel dafür, wie man einen sanften Scale-in und Scale-out-Effekt mit Wiederbelebt.

1. Installieren Sie Reanimated und importieren Sie es.
2. Wickeln Sie jeden Artikel in ein Animierte.Ansichtwobei sich der Skalenwert je nach Ziehzustand ändert.

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

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

  return (
    
      
        {item.label}
      
    
  );
};

Prüfung und Fehlersuche

Führen Sie die App auf einem Gerät oder in einem Emulator aus und testen Sie die Drag-and-Drop-Funktion, indem Sie ein Element gedrückt halten und es dann verschieben.

Tipps

• Experimentieren mit activeScale in ScaleDecorator für den idealen Maßstab.
• Passen Sie die Auffüllungen und Ränder der Elemente an, um ein Layout zu erstellen, das Ihrem Design entspricht.
• Verwenden Sie withSpring() in Reanimated für einen fließenden Übergang von der Skalierung zur Skalierung.

Abschluss

Hinzufügen eines Draggables FlatList mit einem Skalendekorator in Native reagieren verbessert die Benutzerinteraktion, indem es visuelles Feedback gibt und ein nahtloses Drag-and-Drop-Erlebnis schafft. Egal, ob es sich um eine Aufgabenliste, einen Aufgabenmanager oder sogar eine UI zum Neuordnen handelt, der Scale Decorator sorgt dafür, dass sich die App ausgefeilt und reaktionsschnell anfühlt.

Durch die Kombination react-native-draggable-flatlist, ScaleDecorator, und optionalen Reanimated-Animationen können Sie eine dynamische und interaktive Liste erstellen, die sich von anderen abhebt. Jetzt sind Sie bereit, eine ansprechende, ziehfreundliche Liste zu implementieren, die die Benutzer lieben werden!