Przewodnik po zwijanych sekcjach i akordeonach w React Native
Zwijane sekcje i akordeon w React Native bez biblioteki | We.Inc
Zwijaj i rozwijaj sekcje w React Native za pomocą LayoutAnimation, obracaj strzałkę przez Animated i zgłaszaj accessibilityState expanded. Podgląd akordeonu na żywo.
Aby zwinąć sekcję w React Native, trzymaj w stanie flagę open i renderuj treść tylko wtedy, gdy ma wartość true. Wywołaj LayoutAnimation.configureNext przed zmianą flagi, a otaczające widoki płynnie przesuną się na nowe miejsca. Nadaj nagłówkowi Pressable accessibilityRole="button" i accessibilityState={{ expanded }}, aby czytniki ekranu informowały, czy sekcja jest otwarta.
Dwa sposoby animowania zwijanej sekcji
Metoda
Co animuje
Do czego się nadaje
LayoutAnimation.configureNext
Następną zmianę układu każdego widoku
Treści o nieznanej wysokości, listy sekcji
Animated.timing with useNativeDriver
Właściwości niezwiązane z układem, takie jak transform i opacity
Obrót strzałki i zanikanie
Animated with height
Wysokość, w wątku JS
Panele o stałej wysokości, gdy potrzebujesz precyzyjnej kontroli
Akordeon poniżej to webowy odpowiednik kodu React Native z tej strony: ten sam kształt stanu, ta sama flaga expanded na każdym nagłówku. Przełączaj między trybem, w którym kilka sekcji może być otwartych, a trybem tylko jednej, a potem skopiuj wersję pasującą do Twojego ekranu.
Stan przechowuje id otwartych sekcji albo pojedyncze id, gdy otwarta może być tylko jedna.
Naciśnięcie nagłówka wywołuje LayoutAnimation.configureNext z gotowym ustawieniem, a potem aktualizuje stan.
Przy następnym przebiegu układu treść jest montowana lub odmontowywana, a sąsiednie widoki płynnie przesuwają się na miejsce.
Wartość Animated obraca strzałkę z native driverem, bo obrót to transformacja.
accessibilityState expanded na nagłówku informuje technologie wspomagające, które sekcje są otwarte.
Na Androidzie dokumentacja każe wywołać UIManager.setLayoutAnimationEnabledExperimental(true), jeśli ta funkcja istnieje; zabezpiecz wywołanie sprawdzeniem jej istnienia.
Celem naciśnięcia powinien być cały wiersz nagłówka, a nie tylko ikona strzałki.
Odmontowanie treści jest prostsze niż animowanie wysokości i trzyma ukrytą zawartość poza drzewem dostępności.
Nie animuj wysokości z useNativeDriver: dokumentacja React Native mówi, że native driver animuje tylko właściwości niezwiązane z układem, takie jak transform i opacity.
Jeśli zawartość w środku musi zachować swój stan po zamknięciu, ukryj ją przez display: "none" zamiast ją odmontowywać.
Najczęściej zadawane pytania
Jak animować zwijany widok w React Native?
Wywołaj LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) tuż przed zmianą stanu, która pokazuje lub ukrywa treść. Ustawienie easeInEaseOut trwa 300 milisekund.
Dlaczego LayoutAnimation nic nie robi na Androidzie?
Strona o LayoutAnimation mówi, że Android wymaga UIManager.setLayoutAnimationEnabledExperimental(true), wywołanego tylko wtedy, gdy ta funkcja istnieje. Uruchom to raz przy starcie aplikacji, przed pierwszą animowaną zmianą.
Czy mogę animować wysokość przez Animated z native driverem?
Nie. Dokumentacja React Native ogranicza native driver do właściwości niezwiązanych z układem, takich jak transform i opacity, więc wartości układu, takie jak height, odpadają. Animuj wysokość bez native drivera albo użyj LayoutAnimation.
Skąd czytniki ekranu wiedzą, że sekcja jest otwarta?
Ustaw accessibilityState={{ expanded: isOpen }} na nagłówku albo props aria-expanded. Dokumentacja opisuje expanded jako informację, czy rozwijalny element jest aktualnie rozwinięty czy zwinięty.
Akordeon czy niezależne sekcje
Akordeon trzyma otwartą jedną sekcję, co pasuje do ekranów ustawień i krótkich FAQ, gdzie czytelnik szuka jednej odpowiedzi. Niezależne sekcje pasują do filtrów lub szczegółów zamówienia, gdzie przydaje się porównanie dwóch otwartych paneli.
Oba warianty używają tego samego komponentu; zmienia się tylko funkcja przełączania. Dla niezależnych sekcji przechowuj Set z id, a dla akordeonu pojedyncze id, które staje się null, gdy otwarta sekcja zostanie naciśnięta ponownie.
Jak zachować płynność
LayoutAnimation konfiguruje tylko najbliższą zmianę układu, więc wywołuj je w handlerze naciśnięcia, tuż przed setState, za każdym razem. Jednorazowe wywołanie przy montowaniu nie ma wpływu na późniejsze naciśnięcia.
Bardzo długie treści mogą nadal przycinać się na słabszych telefonach. Ciężkie listy wewnątrz sekcji ładuj leniwie albo renderuj krótki podgląd z linkiem do pełnego ekranu.
Kod zwijanej sekcji
Zwijana sekcja z LayoutAnimation i obracającą się strzałką
Treść jest zamontowana tylko wtedy, gdy sekcja jest otwarta. Strzałka obraca się z native driverem, bo obrót to transformacja.
Akordeon: tylko jedna sekcja otwarta naraz
Pojedyncze id w stanie. Ponowne naciśnięcie otwartej sekcji ustawia je na null i ją zamyka.
Kiedy zostanie wysłane moje zamówienie?
Zamówienia złożone przed południem wychodzą tego samego dnia. Link do śledzenia dostaniesz mailem, gdy tylko paczka zostanie zeskanowana.
Czy mogę zwrócić produkt?
Nieużywane produkty możesz odesłać w ciągu 30 dni. Rozpocznij zwrot na ekranie zamówienia i wydrukuj etykietę.
Jak zmienić adres?
Otwórz Konto, a potem Adresy. Zmiany dotyczą zamówień, które nie zostały jeszcze wysłane.
Podgląd akordeonu
Przykładowe pytania pomocy z wymyślonego sklepu, aby pokazać działanie.