Plattformübergreifender Modal Picker für React Native, der die Schlüsselwortfilterung unterstützt

Blog

Plattformübergreifender Modal Picker für React Native, der die Schlüsselwortfilterung unterstützt

Plattformübergreifender Modal Picker für React Native, der die Schlüsselwortfilterung unterstützt

React-native-modal-filter-picker

Demo



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:



ListView

Optionen

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