Dropdown in React Native: zelf bouwen met Modal + FlatList | We.Inc
Bouw een dropdown in React Native zonder library met Modal en FlatList, of gebruik de community-Picker. Code om te kopiëren, een live webpreview en een propstabel.
React Native heeft geen dropdown of select in de lijst met kerncomponenten. U bouwt er zelf een met een Pressable als trigger, een Modal en een FlatList met opties, of u installeert het community-pakket @react-native-picker/picker, dat de native picker op Android en iOS omhult. Bouw zelf als u zoeken, eigen rijen of één uiterlijk op elk platform nodig hebt.
Drie manieren om een lijst met keuzes te tonen
Aanpak
Installeren
Het best voor
Pressable + Modal + FlatList
Niets, alles is kern
Eigen styling, zoeken, lange lijsten
@react-native-picker/picker
npm install @react-native-picker/picker
Het eigen picker-uiterlijk van het platform
ActionSheetIOS
Niets, alleen iOS
Een korte lijst acties op de iPhone
De preview hieronder gebruikt dezelfde logica als de React Native-code verderop, getekend met webelementen zodat u het hier kunt proberen: open de lijst, filter, kies een rij en sluit met Escape. Kopieer daarna de component en vervang de webtags door View, Text, Pressable, Modal en FlatList.
Een Pressable toont de huidige keuze, of een placeholder als er niets is gekozen.
Erop drukken zet een open-vlag, waardoor een Modal zichtbaar wordt.
In de Modal rendert een FlatList één Pressable-rij per optie.
Op een rij tikken roept onChange aan met de waarde en zet de vlag terug op false.
onRequestClose verwerkt de terugknop van Android, zodat de lijst altijd kan worden gesloten.
Geef de Modal een onRequestClose-handler; de documentatie markeert die als verplicht op Android en Apple TV.
Zet transparent op de Modal en teken uw eigen gedimde achtergrond, zodat het scherm erachter zichtbaar blijft.
Gebruik keyExtractor met uw optiewaarden, zodat rijen stabiele keys houden als het filter verandert.
Zet accessibilityRole="button" op de trigger en markeer de gekozen rij met accessibilityState selected.
Geef keyboardShouldPersistTaps="handled" mee aan de FlatList als er een zoekveld boven staat, zodat één tik een rij kiest in plaats van alleen het toetsenbord te sluiten.
Veelgestelde vragen
Heeft React Native een ingebouwde dropdown?
Nee. De pagina met kerncomponenten noemt Button en Switch onder de interface-elementen, en niets voor selects. Installeer het community-pakket @react-native-picker/picker voor een kant-en-klare native select.
Hoe laat ik de Picker op Android op een dropdown lijken?
Zet mode="dropdown" op de Picker. Die prop werkt alleen op Android; de standaard daar is "dialog", die een modale lijst opent. Op iOS toont de component in plaats daarvan het native draaiwiel.
Waarom sluit een tik op een optie alleen het toetsenbord?
Een scrollende lijst heeft keyboardShouldPersistTaps standaard op "never", dus de eerste tik buiten het actieve invoerveld sluit het toetsenbord en de rij ontvangt de tik nooit. Zet de prop op de FlatList op "handled".
Kan ik zoeken toevoegen aan een dropdown in React Native?
Ja, met de eigen bouw. Bewaar een zoekstring in state, zet een TextInput bovenaan de Modal en geef de gefilterde array door aan de data-prop van de FlatList.
Wanneer u zelf bouwt
De community-Picker is de snelste route en ziet er op elk platform native uit, wat ook betekent dat hij er op Android en iOS anders uitziet. Als uw ontwerp overal dezelfde lijst, een filterveld, iconen of twee regels per rij vraagt, geeft de Modal-versie u volledige controle in ongeveer vijftig regels.
FlatList rendert alleen de rijen in de buurt van het scherm, dus een lijst met landen of tijdzones blijft snel binnen de Modal. Een gewone map over een lange array binnen een ScrollView rendert alles in één keer.
Toegankelijkheid van een eigen select
Schermlezers kunnen niet raden dat uw Pressable een lijst opent. Geef hem accessibilityRole="button", een label dat het veld en de huidige waarde noemt, en zet accessibilityState met selected: true op de gekozen rij in de lijst.
Na het sluiten van de lijst moet de gebruiker terug bij de trigger zijn. Houd onRequestClose van de Modal gekoppeld en voeg een zichtbare sluitknop toe voor mensen die het teruggebaar niet gebruiken.
Props die ertoe doen voor een dropdown
Kernprops die de eigen dropdown gebruikt
Component
Prop
Wat het doet
Modal
Toont of verbergt de lijst (standaard true)
Modal
Rendert over een doorzichtige achtergrond in plaats van het scherm te vullen
Modal
animationType
"none" (standaard), "slide" of "fade"
Modal
onRequestClose
Aangeroepen bij de terugknop van Android; verplicht op Android
FlatList
data / renderItem
De array met opties en de functie die elke rij tekent
FlatList
keyExtractor
Geeft per optie een unieke key terug
FlatList
keyboardShouldPersistTaps
"never" (standaard), "always" of "handled"
Picker
Alleen Android: "dialog" (standaard) of "dropdown"
Dropdown-code om te kopiëren
Dropdown met Pressable, Modal en FlatList
Geen dependencies. De parent beheert de waarde; de component meldt alleen de keuze via onChange.
De community-Picker
Installeer met npm install @react-native-picker/picker. onValueChange krijgt de waarde van het item en de positie ervan.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Preview van de dropdown
Webversie van de React Native-component: dezelfde logica voor openen, filteren en kiezen, getekend met HTML zodat hij hier draait.