React Native Dropdown: selbst bauen mit Modal + FlatList | We.Inc
Baue ein React Native Dropdown ohne Bibliothek mit Modal und FlatList oder nutze den Community-Picker. Code zum Kopieren, eine Live-Vorschau im Web und eine Props-Tabelle.
React Native liefert in seinen Kernkomponenten kein Dropdown und kein Select. Entweder baust du eines aus einem Pressable als Auslöser, einem Modal und einer FlatList mit Optionen, oder du installierst das Community-Paket @react-native-picker/picker, das den nativen Picker auf Android und iOS kapselt. Bau dein eigenes, wenn du Suche, eigene Zeilen oder auf jeder Plattform dasselbe Aussehen brauchst.
Drei Wege, eine Auswahlliste anzuzeigen
Ansatz
Installation
Am besten für
Pressable + Modal + FlatList
Nichts, alles Kernkomponenten
Eigenes Styling, Suche, lange Listen
@react-native-picker/picker
npm install @react-native-picker/picker
Das native Picker-Aussehen der Plattform
ActionSheetIOS
Nichts, nur iOS
Eine kurze Liste von Aktionen auf dem iPhone
Die Vorschau unten nutzt dieselbe Logik wie der React-Native-Code weiter unten, nur mit Web-Elementen gezeichnet, damit du sie hier ausprobieren kannst: Öffne die Liste, filtere sie, wähle eine Zeile und schließe sie mit Escape. Kopiere dann die Komponente und ersetze die Web-Tags durch View, Text, Pressable, Modal und FlatList.
Ein Pressable zeigt die aktuelle Auswahl oder einen Platzhalter, wenn nichts gewählt ist.
Ein Druck darauf setzt ein open-Flag, wodurch ein Modal sichtbar wird.
Im Modal rendert eine FlatList pro Option eine Pressable-Zeile.
Ein Tippen auf eine Zeile ruft onChange mit dem Wert auf und setzt das Flag wieder auf false.
onRequestClose behandelt die Zurück-Taste von Android, damit sich die Liste immer schließen lässt.
Gib dem Modal einen onRequestClose-Handler, die Dokumentation kennzeichnet ihn auf Android und Apple TV als Pflicht.
Setze transparent am Modal und zeichne deinen eigenen abgedunkelten Hintergrund, damit der Bildschirm dahinter sichtbar bleibt.
Nutze keyExtractor mit deinen Optionswerten, damit die Zeilen stabile Keys behalten, wenn sich der Filter ändert.
Setze accessibilityRole="button" auf den Auslöser und markiere die gewählte Zeile mit accessibilityState selected.
Übergib der FlatList keyboardShouldPersistTaps="handled", wenn darüber ein Suchfeld sitzt, damit ein Tippen eine Zeile wählt, statt nur die Tastatur zu schließen.
Häufige Fragen
Hat React Native ein eingebautes Dropdown?
Nein. Die Seite der Kernkomponenten listet unter den Bedienelementen Button und Switch auf, aber nichts für Selects. Für ein fertiges natives Select installierst du das Community-Paket @react-native-picker/picker.
Wie lasse ich den Picker auf Android wie ein Dropdown aussehen?
Setze mode="dropdown" am Picker. Diese Prop gibt es nur auf Android, der Standard ist dort "dialog", der eine modale Liste öffnet. Auf iOS zeigt die Komponente stattdessen das native Rad.
Warum schließt ein Tippen auf eine Option nur die Tastatur?
Bei einer scrollenden Liste steht keyboardShouldPersistTaps standardmäßig auf "never", daher schließt das erste Tippen außerhalb des fokussierten Eingabefelds die Tastatur, und die Zeile bekommt es nie. Setze die Prop an der FlatList auf "handled".
Kann ich einem React Native Dropdown eine Suche hinzufügen?
Ja, mit der selbst gebauten Variante. Halte einen Suchstring im State, setze oben ins Modal ein TextInput und übergib das gefilterte Array an die data-Prop der FlatList.
Wann du dein eigenes bauen solltest
Der Community-Picker ist der schnellste Weg und sieht auf jeder Plattform nativ aus, was auch heißt, dass er auf Android und iOS unterschiedlich aussieht. Verlangt dein Design überall dieselbe Liste, ein Filterfeld, Icons oder zwei Zeilen pro Eintrag, gibt dir die Modal-Variante mit etwa fünfzig Zeilen volle Kontrolle.
FlatList rendert nur die Zeilen in der Nähe des Bildschirms, daher bleibt eine Liste mit Ländern oder Zeitzonen im Modal schnell. Ein einfaches map über ein langes Array in einer ScrollView rendert alles auf einmal.
Barrierefreiheit für ein eigenes Select
Screenreader können nicht erraten, dass dein Pressable eine Liste öffnet. Gib ihm accessibilityRole="button", ein Label, das das Feld und seinen aktuellen Wert nennt, und setze accessibilityState mit selected: true auf die gewählte Zeile in der Liste.
Das Schließen der Liste sollte den Nutzer zum Auslöser zurückbringen. Lass onRequestClose am Modal verdrahtet und ergänze ein sichtbares Schließen-Element für alle, die die Zurück-Geste nicht nutzen.
Props, die für ein Dropdown wichtig sind
Kern-Props des selbst gebauten Dropdowns
Komponente
Prop
Was sie macht
Modal
Zeigt oder versteckt die Liste (Standard true)
Modal
Rendert über einem durchsichtigen Hintergrund, statt den Bildschirm zu füllen
Modal
animationType
"none" (Standard), "slide" oder "fade"
Modal
onRequestClose
Wird für die Zurück-Taste von Android aufgerufen, auf Android Pflicht
FlatList
data / renderItem
Das Options-Array und die Funktion, die jede Zeile zeichnet
FlatList
keyExtractor
Gibt pro Option einen eindeutigen Key zurück
FlatList
keyboardShouldPersistTaps
"never" (Standard), "always" oder "handled"
Picker
Nur Android: "dialog" (Standard) oder "dropdown"
Dropdown-Code zum Kopieren
Dropdown aus Pressable, Modal und FlatList
Keine Abhängigkeiten. Die Elternkomponente hält den Wert, die Komponente meldet die Auswahl nur über onChange.
Der Community-Picker
Installiere ihn mit npm install @react-native-picker/picker. onValueChange erhält den Wert des Eintrags und seine Position.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Dropdown-Vorschau
Web-Ersatz für die React-Native-Komponente: dieselbe Logik zum Öffnen, Filtern und Auswählen, mit HTML gezeichnet, damit sie hier läuft.