Plattformübergreifender Modal Picker für React Native, der die Schlüsselwortfilterung unterstützt
React-native-modal-filter-picker
Eine plattformübergreifende (iOS, Android) Modalauswahl für React Native.
Merkmale:
- Plattformübergreifend (iOS, Android)
- Standard-Styling funktioniert gut
- Umfangreich anpassbares Styling und Rendering
- Integrierter Suchfilter für lange Listen
- Verwendet React Native |_+_| für Lazy-Loading und hohe Leistung
- Kompatibel mit React Native 0.40+
- Erfolgreich in Produktions-Apps eingesetzt
Installation
Verwenden Sie NPM/Yarn, um das Paket zu installieren: |_+_|
Verwendungszweck
Eine grundlegende Demo:
ListViewOptionen
Die folgenden Funktionalitätseigenschaften können an die Komponente übergeben werden:
| Requisitenname | Typ | Standard | Beschreibung |
|---|---|---|---|
react-native-modal-filter-picker | |_+_| von |_+_| | (erforderlich) | Die in der Liste anzuzeigenden Optionen |
import { Component, View, Text, TouchableOpacity } from 'react-native' import ModalFilterPicker from 'react-native-modal-filter-picker' export default class App extends Component { constructor (props, ctx) { super(props, ctx); this.state = { visible: false, picked: null, }; } render() { const { visible, picked } = this.state; const options = [ { key: 'kenya', label: 'Kenya', }, { key: 'uganda', label: 'Uganda', }, { key: 'libya', label: 'Libya', }, { key: 'morocco', label: 'Morocco', }, { key: 'estonia', label: 'Estonia', }, ]; return ( Select country Selected: {picked} ); } onShow = () => { this.setState({ visible: true }); } onSelect = (picked) => { this.setState({ picked: picked, visible: false }) } onCancel = () => { this.setState({ visible: false }); } } | options | (erforderlich) | Rückruf bei Auswahl einer Option |
Array | { key, label } | (erforderlich) | Rückruf bei gedrückter Abbruchtaste |
onSelect | function (key) {} | onCancel | Platzhaltertext für Filtereingabetextfeld |
function () {} | placeholderText | String | Farbe des Platzhaltertextes für das Filtereingabetextfeld |
'Filter...' | placeholderTextColor | String | Android-Textunterstreichungsfarbe des Filtereingabetextfelds |
'#ccc' | androidUnderlineColor | String | Schaltflächentext abbrechen |
'rgba(0,0,0,0)' | cancelButtonText | String | Titeltext, der über der Optionsliste angezeigt wird |
'Cancel' | title | String | Text, der angezeigt wird, wenn keine Filterergebnisse vorliegen |
null | noResultsText | String | Ob modal angezeigt werden soll oder nicht. Auf diese Weise können Sie steuern, wann die Auswahl angezeigt und/oder ausgeblendet wird. |
'No matches' | visible | Boolean | Ob das Filtertextfeldfeld angezeigt werden soll oder nicht |
true | showFilter | Boolean | Optionen zur Übergabe an native |_+_| Komponente |
true | modal | Object | Die aktuell ausgewählte Option, um sie optisch von anderen zu unterscheiden |
null | Modal | selectedOption | Eigenschaften, die an das gerenderte |_+_| . übergeben werden sollen |
String | null | listViewProps | Benutzerdefinierter Optionsrenderer |
Object | null | ListView | Benutzerdefinierter Optionslisten-Renderer |
renderOption | function (option, isSelected) {} | null | Benutzerdefinierter Renderer für die Schaltfläche zum Abbrechen |
renderList | function () {} / null / renderCancelButton | function () {} | Legt fest, wann die Tastatur nach einem Antippen sichtbar bleiben soll. Bei |_+_| wird die Tastatur durch Tippen außerhalb der fokussierten Texteingabe bei geöffneter Tastatur geschlossen. In diesem Fall erhalten Kinder den Hahn nicht. Bei |_+_| wird die Tastatur nicht automatisch geschlossen, und die Scroll-Ansicht fängt keine Taps auf, aber Kinder der Scroll-Ansicht können Taps abfangen. Bei |_+_| wird die Tastatur nicht automatisch geschlossen, wenn das Tippen von einem Kind gehandhabt wurde (oder von einem Vorfahren erfasst wurde). |
null | keyboardShouldPersistTaps | never | Wenn true, fokussiert die Eingabe auf |_+_|. |
Außerdem können die folgenden Styling-Requisiten (die jeweils ein |_+_| bestehend aus Stilen sein müssen) übergeben werden:
Python Microsoft Access-Datenbank
| Requisitenname | Beschreibung |
|---|---|
always | Stil für das modale Hintergrund-Overlay |
handle | Stil für die |_+_| Umwickeln der Optionsliste |
never | Stil für die |_+_| Umschließen des Filtereingabetextfelds |
never | Stil für das Filtereingabetextfeld |
always | Stil für die |_+_| den Abbrechen-Button einpacken |
handled | Stil für die Schaltflächenfläche des Abbrechen-Buttons |
autoFocus | Stil für den Abbruch-Button-Text |
Boolean | Stil für den Titeltext |
false | Stil für den Optionstext |
Erweiterte Filterung
Standardmäßig können Sie im Filtereingabefeld nach der Option |_+_| . filtern das wird auf dem Bildschirm angezeigt.
Du kannst aber auch ein |_+_| . anhängen -Attribut jeder Option für den zu verwendenden Filteralgorithmus. Zum Beispiel können wir dem Benutzer erlauben, sowohl nach Kontinent als auch nach Ländername zu filtern, obwohl wir den Kontinentnamen nicht anzeigen:
componentDidMount()Wenn Sie das obige Beispiel ausführen, können Sie |_+_| . eingeben in das Filtereingabefeld, um alle Länder innerhalb Afrikas zu sehen.
Hinweis: Beim Filtern wird die Groß-/Kleinschreibung nicht beachtet
Download-Details:
Autor: versteckttao
GitHub: https://github.com/hiddentao/react-native-modal-filter-picker
java csv zu json
#reagieren-nativ #reagieren #programmierung