React Native dropdown: zbuduj go z Modal + FlatList | We.Inc
Zbuduj dropdown w React Native bez biblioteki, z Modal i FlatList, albo użyj społecznościowego Pickera. Kod do skopiowania, podgląd na żywo w przeglądarce i tabela propsów.
React Native nie ma na liście podstawowych komponentów ani dropdownu, ani selecta. Możesz zbudować go sam z przycisku Pressable, komponentu Modal i FlatList z opcjami albo zainstalować społecznościowy pakiet @react-native-picker/picker, który opakowuje natywny picker na Androidzie i iOS. Buduj własny, gdy potrzebujesz wyszukiwania, niestandardowych wierszy albo jednego wyglądu na każdej platformie.
Trzy sposoby na pokazanie listy wyboru
Podejście
Instalacja
Najlepsze do
Pressable + Modal + FlatList
Nic, wszystko w rdzeniu
Własne style, wyszukiwanie, długie listy
@react-native-picker/picker
npm install @react-native-picker/picker
Natywny wygląd pickera danej platformy
ActionSheetIOS
Nic, tylko iOS
Krótka lista akcji na iPhonie
Poniższy podgląd działa na tej samej logice co kod React Native niżej, ale jest narysowany elementami webowymi, abyś mógł go wypróbować tutaj: otwórz listę, przefiltruj ją, wybierz wiersz i zamknij klawiszem Escape. Potem skopiuj komponent i zamień znaczniki webowe na View, Text, Pressable, Modal i FlatList.
Pressable pokazuje bieżący wybór albo placeholder, gdy nic nie wybrano.
Naciśnięcie ustawia flagę otwarcia, która sprawia, że Modal staje się widoczny.
Wewnątrz Modal komponent FlatList renderuje po jednym wierszu Pressable na opcję.
Dotknięcie wiersza wywołuje onChange z wartością i z powrotem ustawia flagę na false.
onRequestClose obsługuje przycisk wstecz na Androidzie, więc listę zawsze da się zamknąć.
Daj komponentowi Modal handler onRequestClose. Dokumentacja oznacza go jako wymagany na Androidzie i Apple TV.
Ustaw transparent na Modal i narysuj własne przyciemnione tło, aby ekran pod spodem pozostał widoczny.
Używaj keyExtractor z wartościami opcji, aby wiersze zachowywały stabilne klucze, gdy zmienia się filtr.
Dodaj accessibilityRole="button" do przycisku otwierającego i oznacz wybrany wiersz przez accessibilityState selected.
Przekaż keyboardShouldPersistTaps="handled" do FlatList, gdy nad nią jest pole wyszukiwania, aby jedno dotknięcie wybierało wiersz, a nie tylko zamykało klawiaturę.
Najczęściej zadawane pytania
Czy React Native ma wbudowany dropdown?
Nie. Strona podstawowych komponentów wymienia wśród kontrolek interfejsu Button i Switch, a dla selectów nic. Jeśli chcesz gotowy natywny select, zainstaluj społecznościowy pakiet @react-native-picker/picker.
Jak sprawić, by Picker na Androidzie wyglądał jak dropdown?
Ustaw mode="dropdown" na komponencie Picker. Ten props działa tylko na Androidzie, a domyślną wartością jest tam "dialog", która otwiera listę w oknie modalnym. Na iOS komponent pokazuje zamiast tego natywne kółko wyboru.
Dlaczego dotknięcie opcji tylko zamyka klawiaturę?
Przewijana lista domyślnie ma keyboardShouldPersistTaps ustawione na "never", więc pierwsze dotknięcie poza aktywnym polem zamyka klawiaturę, a wiersz go nie dostaje. Ustaw ten props na "handled" w FlatList.
Czy mogę dodać wyszukiwanie do dropdownu w React Native?
Tak, we własnej wersji. Trzymaj zapytanie w stanie, umieść TextInput na górze komponentu Modal i przekaż przefiltrowaną tablicę do propsa data w FlatList.
Kiedy budować własny
Społecznościowy Picker to najszybsza droga i wygląda natywnie na każdej platformie, co oznacza też, że wygląda inaczej na Androidzie i iOS. Jeśli projekt wymaga wszędzie tej samej listy, pola filtra, ikon albo dwóch linii w wierszu, wersja z Modal daje pełną kontrolę w około pięćdziesięciu liniach.
FlatList renderuje tylko wiersze w pobliżu ekranu, więc lista krajów czy stref czasowych pozostaje szybka wewnątrz Modal. Zwykłe map po długiej tablicy wewnątrz ScrollView renderuje wszystko naraz.
Dostępność własnego selecta
Czytniki ekranu nie zgadną, że Twój Pressable otwiera listę. Daj mu accessibilityRole="button", etykietę z nazwą pola i jego bieżącą wartością, a w wybranym wierszu listy ustaw accessibilityState z selected: true.
Zamknięcie listy powinno przenieść użytkownika z powrotem do przycisku otwierającego. Zostaw podpięte onRequestClose komponentu Modal i dodaj widoczny przycisk zamknięcia dla osób, które nie używają gestu wstecz.
Propsy istotne dla dropdownu
Podstawowe propsy używane przez własny dropdown
Komponent
Props
Co robi
Modal
Pokazuje lub ukrywa listę (domyślnie true)
Modal
Renderuje na przezroczystym tle zamiast wypełniać ekran
Modal
animationType
"none" (domyślnie), "slide" lub "fade"
Modal
onRequestClose
Wywoływany dla przycisku wstecz na Androidzie, wymagany na Androidzie
FlatList
data / renderItem
Tablica opcji i funkcja rysująca każdy wiersz
FlatList
keyExtractor
Zwraca unikalny klucz dla każdej opcji
FlatList
keyboardShouldPersistTaps
"never" (domyślnie), "always" lub "handled"
Picker
Tylko Android: "dialog" (domyślnie) lub "dropdown"
Kod dropdownu do skopiowania
Dropdown z Pressable, Modal i FlatList
Bez zależności. Wartość należy do rodzica, a komponent tylko zgłasza wybór przez onChange.
Społecznościowy Picker
Instalacja przez npm install @react-native-picker/picker. onValueChange otrzymuje wartość elementu i jego pozycję.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Podgląd dropdownu
Webowy zamiennik komponentu React Native: ta sama logika otwierania, filtrowania i wybierania, narysowana w HTML, aby działała tutaj.