Ziehen, ablegen, sortieren: Ziehbare Sortierung in React Native implementieren

Die Implementierung der interaktiven Draggable-Sortierfunktion in Ihrer React Native App kann mühsam und kompliziert sein. In diesem Blog zeige ich Ihnen, wie Sie die Draggable-Sortierfunktion relativ einfach implementieren können.

Verschiebbare Sortierung

Bei der verschiebbaren Sortierung handelt es sich um eine Funktion, mit der Sie Elemente in einer Liste neu anordnen können, indem Sie sie per Drag&Drop in verschiedene Positionen ziehen. Mit der ziehbaren Sortierung können Sie die Reihenfolge der Elemente ganz einfach nach Ihren Wünschen ändern. Sie bietet eine bequeme und intuitive Möglichkeit, die Reihenfolge in einer Liste zu ändern.

Das folgende Beispiel zeigt die ziehbare Sortierung in einer Liste.

React-native-animierte Komplexität

Es gibt Bibliotheken, die in React Native eine verschiebbare Sortierung hinzufügen, zum Beispiel mit react-native-draggable-flatlist. Diese Bibliothek baut auf der Animationsbibliothek react-native-animated auf. Im Vergleich zur React Native-eigenen Animationsbibliothek bietet diese Bibliothek Geschwindigkeitsverbesserungen, zum Beispiel durch die Verwendung von Worklets. Das Ergebnis sind schnelle und flüssige Animationen auch für komplexe Oberflächen, aber der Installationsprozess der Bibliothek ist relativ komplex und birgt viele offene Fragen. Ich habe versucht, die Bibliothek in meiner Beispielanwendung zu installieren, konnte sie aber nicht zum Laufen bringen, weil sie beim Starten abstürzte. Meiner Meinung nach ist die Bibliothek nicht stabil, zu komplex und wird, wenn sie integriert wird, zu Wartungskosten führen.

Eine andere Möglichkeit ist die Verwendung von react-native-draglist, die einen einfacheren Ansatz für die Implementierung einer verschiebbaren Sortierung bietet. Es ist einfacher, weil es die Animated-Bibliothek von React Native verwendet und ein Drop-in-Ersatz für FlatList von React Native ist. Lassen Sie uns in den Code eintauchen, um zu zeigen, wie Sie damit eine Liste von Visitenkarten anzeigen können.

const renderItem = ({
  item,
  onDragStart,
  onDragEnd,
  isActive,
}: DragListRenderItemInfo<BusinessCard>) => (
  <Card
    data={item}
    isScalingActive={isActive}
    onLongPress={onDragStart}
    onPressOut={onDragEnd}
  />
);

...

function BusinessCardList(): JSX.Element {
return (
    <DragList
      contentContainerStyle={styles.dragListContainer}
      data={sortedBusinessCards}
      keyExtractor={(item: BusinessCard) => item.id}
      renderItem={renderItem}
      onReordered={onReordered}
      style={styles.dragListStyle}
    />
  );
}

Kommt Ihnen dieser Code nicht bekannt vor? Ja, und das liegt daran, dass die Bibliothek dieselben Requisiten verwendet wie die FlatList von React Native. Um die Sortierung zu unterstützen, implementieren wir die folgenden Schritte:

• Schleppen. Informieren Sie das Modul, wenn das Ziehen beginnt. Wenn der Benutzer die Karte eine Sekunde lang drückt, wird aufgerufen, um dem Modul mitzuteilen, dass das Sortieren beginnen kann. Dies führt dazu, dass das Ziehen gestartet wird.
• Fallen lassen. Der Benutzer kann mit dem Ziehen der Karte beginnen. Wenn er fertig ist, kann er die Karte an der richtigen Stelle ablegen. In diesem Moment wird onPressOut aufgerufen.
• Sortieren. Um zu erfahren, an welchen Ort die Karte verschoben wurde, wird onReordered aufgerufen. Mit dieser Information können wir diese Information als neuen Sortierstatus speichern.

Skalierungseffekt

Wäre es nicht schön, einen Skalierungseffekt hinzuzufügen, wenn wir mit dem Sortieren beginnen? Dies würde dem Benutzer helfen, auf intuitive Weise zu erkennen, welche Karte er sortieren wird.

 

Die Bibliothek react-native-draglist bietet dafür die Requisite isActive, die sich beim Ziehen der Karte in true verwandelt. Dies ist nützlich, um die Karte in einer Animation zu skalieren. Der folgende Codeschnipsel zeigt, wie die Skalierung in der Beispielanwendung implementiert ist.

const CARD_SORT_ACTIVE = 1.06;
const SCALE_DURATION = 200;

...

const scaleValue = React.useRef(new Animated.Value(1)).current;

useEffect(() => {
  if (isScalingActive) {
    Animated.timing(scaleValue, {
      toValue: CARD_SORT_ACTIVE,
      duration: SCALE_DURATION,
      useNativeDriver: true,
    }).start();
  } else {
    Animated.timing(scaleValue, {
      toValue: 1,
      duration: SCALE_DURATION,
      useNativeDriver: true,
    }).start();
  }
  }, [scaleValue, isScalingActive]);

...

<Pressable
  onLongPress={onLongPress}
  onPress={onPress}
  onPressOut={onPressOut}
>
  <Animated.View
    style={{
      transform: [
        {
          scale: scaleValue,
        },
      ],
    }}
  >
    {children}
  </Animated.View>
</Pressable>

Haptisches Feedback

Um das Benutzererlebnis zu vervollständigen, wäre es schön, auch haptisches Feedback hinzuzufügen. Dies wäre ein zusätzlicher, fühlbarer Hinweis darauf, dass der Benutzer beginnt, die Liste zu sortieren. Zusammen mit der visuellen Skalierung bietet die Kombination mit dem haptischen Feedback ein umfassendes Erlebnis für den Benutzer.

Um haptisches Feedback hinzuzufügen, verwenden wir react-native-haptic-feedback, das haptische Fähigkeiten hinzufügt. Da die Rückmeldung subtil, aber spürbar sein muss, verwende ich impactMedium. Wenn Sie Ihre Apps mit haptischen Funktionen ausstatten möchten, sollten Sie sich unbedingt über die besten Praktiken informieren, wann und welche haptischen Funktionen Sie einsetzen sollten. Die iOS Haptic Guidelines sind eine gute Quelle, in der Sie auch die verschiedenen haptischen Typen ausprobieren können.

In unserer Beispiel-App verwenden wir eine haptische Rückmeldung, wenn die Sortierung beginnt und beendet ist. Zusammen mit dem entsprechenden Skalierungseffekt bietet dies ein ergänzendes Benutzererlebnis.

Der folgende Ausschnitt zeigt, wie der Code zur Implementierung des haptischen Feedbacks aussieht.

if (beginningToLongPress || endOfLongPress) {
  trigger(HapticFeedbackTypes.impactMedium);
}

Fazit

Zusammenfassend lässt sich sagen, dass die Implementierung der Draggable-Sortierung in React Native die Listenverwaltung um ein dynamisches Element erweitert. Es gibt zwar fortgeschrittene Bibliotheken wie react-native-draggable-flatlist, aber ihre Komplexität ist vielleicht nicht für jedes Projekt geeignet.

In diesem Beitrag haben wir uns eine einfachere Alternative angesehen, react-native-draglist, die eine unkomplizierte Integration mit der Animated-Bibliothek von React Native bietet. Dieses Gleichgewicht zwischen Funktionalität und Einfachheit macht es zu einer brauchbaren Wahl für Projekte, bei denen eine einfachere Lösung bevorzugt wird.

Wir haben auch darüber gesprochen, einen Skalierungseffekt und haptisches Feedback hinzuzufügen, um die Benutzererfahrung zu verbessern. Die Kombination aus visuellem und haptischem Feedback sorgt für ein intensiveres und ansprechenderes Sortier-Erlebnis.

Viel Spaß beim Codieren!

Beispiel BusinessCards Projekt: GitHub RN-BusinessCards