React Native: Einklappbare Bereiche und Accordions
Leitfaden zu Collapsible und Accordion in React Native
React Native: Collapsible und Accordion ohne Bibliothek | We.Inc
Bereiche in React Native mit LayoutAnimation ein- und ausklappen, den Pfeil mit Animated drehen und accessibilityState expanded melden. Mit Live-Vorschau eines Accordions.
Um einen Bereich in React Native einzuklappen, hältst du ein open-Flag im State und renderst den Inhalt nur, solange es true ist. Rufe LayoutAnimation.configureNext auf, bevor du das Flag änderst, dann gleiten die umgebenden Views an ihre neuen Positionen. Gib dem Header-Pressable accessibilityRole="button" und accessibilityState={{ expanded }}, damit Screenreader ansagen, ob er offen ist.
Zwei Wege, ein Collapsible zu animieren
Methode
Animiert
Gut für
LayoutAnimation.configureNext
Die nächste Layoutänderung jeder View
Inhalte mit unbekannter Höhe, Listen von Bereichen
Animated.timing mit useNativeDriver
Eigenschaften ohne Layoutbezug wie transform und opacity
Die Drehung des Pfeils und Einblendungen
Animated mit height
Die Höhe, auf dem JS-Thread
Panels mit fester Höhe, wenn du feine Kontrolle brauchst
Das Accordion unten ist das Web-Gegenstück zum React-Native-Code auf dieser Seite: gleiche State-Struktur, gleiches expanded-Flag an jedem Header. Schalte um zwischen mehreren offenen Bereichen und nur einem offenen und kopiere dann die Version, die zu deinem Screen passt.
Der State enthält die IDs der offenen Bereiche oder eine einzelne ID, wenn nur einer offen sein darf.
Ein Tippen auf einen Header ruft LayoutAnimation.configureNext mit einem Preset auf und aktualisiert dann den State.
Beim nächsten Layout-Durchlauf wird der Inhalt gemountet oder entfernt, und die Nachbarn animieren an ihren Platz.
Ein Animated-Wert dreht den Pfeil mit dem Native Driver, denn eine Drehung ist ein transform.
accessibilityState expanded am Header teilt assistiven Technologien mit, welche Bereiche offen sind.
Unter Android verlangt die Doku, dass du UIManager.setLayoutAnimationEnabledExperimental(true) aufrufst, sofern es existiert; sichere den Aufruf mit einer Existenzprüfung ab.
Mach die gesamte Header-Zeile zur Tippfläche, nicht nur das Pfeil-Icon.
Den Inhalt zu entfernen ist einfacher, als die Höhe zu animieren, und hält verborgene Inhalte aus dem Accessibility-Baum heraus.
Animiere height nicht mit useNativeDriver: Laut React-Native-Doku animiert der Native Driver nur Eigenschaften ohne Layoutbezug, etwa transform und opacity.
Wenn Inhalte im geschlossenen Zustand ihren State behalten müssen, verstecke sie mit display: "none", statt sie zu entfernen.
Häufige Fragen
Wie animiere ich eine einklappbare View in React Native?
Rufe LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) direkt vor der State-Änderung auf, die den Inhalt zeigt oder versteckt. Das Preset easeInEaseOut läuft 300 Millisekunden.
Warum tut LayoutAnimation unter Android nichts?
Die Seite zu LayoutAnimation sagt, dass Android UIManager.setLayoutAnimationEnabledExperimental(true) braucht, aufgerufen nur, wenn diese Funktion existiert. Führe es einmal beim App-Start aus, vor der ersten animierten Änderung.
Kann ich height mit Animated und dem Native Driver animieren?
Nein. Die React-Native-Doku beschränkt den Native Driver auf Eigenschaften ohne Layoutbezug wie transform und opacity, Layoutwerte wie height fallen also raus. Animiere height ohne Native Driver oder nutze stattdessen LayoutAnimation.
Woher wissen Screenreader, dass ein Bereich offen ist?
Setze accessibilityState={{ expanded: isOpen }} am Header oder die Prop aria-expanded. Die Doku beschreibt expanded als Angabe, ob ein ausklappbares Element gerade aus- oder eingeklappt ist.
Accordion oder unabhängige Bereiche
Ein Accordion hält einen Bereich offen, was zu Einstellungsscreens und kurzen FAQs passt, bei denen der Leser eine Antwort sucht. Unabhängige Bereiche passen zu Filtern oder Bestelldetails, wo der Vergleich zweier offener Panels nützlich ist.
Beide nutzen dieselbe Komponente; nur die Toggle-Funktion ändert sich. Speichere für unabhängige Bereiche ein Set von IDs oder eine einzelne ID, die zu null wird, wenn der offene Bereich erneut angetippt wird.
Damit es flüssig bleibt
LayoutAnimation konfiguriert nur das allernächste Layout, rufe es also jedes Mal im Press-Handler direkt vor setState auf. Ein einmaliger Aufruf beim Mounten hat keine Wirkung auf spätere Taps.
Sehr lange Inhalte können auf schwachen Handys trotzdem ruckeln. Lade schwere Listen in einem Bereich lazy oder zeige eine kurze Vorschau mit einem Link zu einem vollständigen Screen.
Code für Collapsibles
Einklappbarer Bereich mit LayoutAnimation und drehendem Pfeil
Der Inhalt wird nur gemountet, solange er offen ist. Der Pfeil dreht sich mit dem Native Driver, weil eine Drehung ein transform ist.
Accordion: immer nur ein Bereich offen
Eine einzelne ID im State. Ein erneutes Tippen auf den offenen Bereich setzt sie auf null und schließt ihn.
Wann wird meine Bestellung verschickt?
Bestellungen vor 12 Uhr mittags gehen noch am selben Tag raus. Du bekommst einen Tracking-Link per E-Mail, sobald das Paket gescannt wurde.
Kann ich einen Artikel zurückschicken?
Unbenutzte Artikel können innerhalb von 30 Tagen zurückgeschickt werden. Starte die Rücksendung über die Bestellansicht und drucke das Etikett aus.
Wie ändere ich meine Adresse?
Öffne Konto und dann Adressen. Änderungen gelten für Bestellungen, die noch nicht verschickt wurden.
Accordion-Vorschau
Beispielfragen aus einem erfundenen Shop, um das Verhalten zu zeigen.