React Natives durchsuchbares Dropdown-Beispiel

Blog

React Natives durchsuchbares Dropdown-Beispiel

React Natives durchsuchbares Dropdown-Beispiel

Reagieren Sie natives durchsuchbares Dropdown

Durchsuchbares Dropdown für die Suche in der Liste (|_+_|) und Sie können einzelne Elemente und mehrere Elemente auswählen.

Installation

FlatList

Eigenschaften

| Requisiten | Beschreibung |
| Artikel | Dropdown-Elemente |
| defaultIndex | Standardmäßig ausgewählter Index von Elementen. (optional) |
| onTextChange | bei Textänderung können Sie onTextChange übergeben und den eingegebenen Text abfangen. (optional) |
| onItemSelect | Bei der Elementauswahl können Sie onItemSelect übergeben und das Eingabeelement abfangen. |
| containerStyle | Komponentencontainer-Stil |
| textInputStyle | TextInput-Stil |
| itemStyle | Elemente im Dropdown-Menü |
| itemTextStyle | Artikeltext |
| resetValue | setze textInput Value mit true und false zurück |
| Platzhalter | textInput-Platzhalter |
| placeholderTextColor | textInput-PlatzhalterTextColor |
| ArtikelContainerStyle | Elemente-Container-Stil können Sie maxHeight übergeben, um die Höhe der Dropdown-Liste der Elemente einzuschränken |
| underlineColorAndroid | TextInput Unterstreichungshöhe |
| listProps | Beispiel für alle unterstützten (FlatList) Requisiten: listProps={ nestedScrollEnabled: true } | |
| textInputProps | Beispiel für alle unterstützten (TextInput) Requisiten: textInputProps={ underlineColorAndroid: ‘transparent’ } |
| setSort | Filterdaten auf Textänderung Beispiel: setSort={(item, searchedText)=> item.name.toLowerCase().startsWith(searchedText.toLowerCase())} |
| multi | Boolesche Mehrfachauswahl umschalten |
| selectedItems | selectedItems of multi selection note: funktioniert, wenn multi prop wahr ist |
| Chip | Boolescher Chip-Anzeigemodus umschalten Hinweis: funktioniert, wenn Multi-Prop wahr ist |
| onRemoveItem | { (item, index) => { } } note: funktioniert, wenn multi prop wahr ist |

Beispiel

npm install --save react-native-searchable-dropdown

Download-Details:

Autor: zubairpaizer

GitHub: https://github.com/zubairpaizer/react-native-searchable-dropdown

#reagieren-nativ #reagieren #mobile-apps