react native material design searchbar Download – react native material design searchbar Quellcode herunterladen

react native material design searchbar

Anderer Quellcode

1.0.0

Herunterladen

React-Native-Material-Design-Suchleiste

Eine React Native Material Design-Suchleiste

Aufstellen

Installieren Sie die SearchBar von npm mit npm i -S react-native-material-design-searchbar . Fordern Sie es dann aus den JavaScript-Dateien Ihrer App mit import SearchBar from 'react-native-material-design-searchbar' . Diese Bibliothek basiert auf React-Native-Vector-Icons. Bitte verlinken Sie es, indem Sie der Installationsanleitung folgen.

Verwendung

Alle Requisiten außer der Höhe sind optional.

 import React , { Component } from 'react' ;
import SearchBar from 'react-native-material-design-searchbar' ;

export default class ExampleComponent extends Component {
  render ( ) {
    return (
      < SearchBar
        onSearchChange = { ( ) => console . log ( 'On Search Change' ) }
        height = { 50 }
        onFocus = { ( ) => console . log ( 'On Focus' ) }
        onBlur = { ( ) => console . log ( 'On Blur' ) }
        placeholder = { 'Search...' }
        autoCorrect = { false }
        padding = { 5 }
        returnKeyType = { 'search' }
      / >
    ) ;
  }
} ;

Verfügbare Requisiten

onSearchChange : Rückruf bei Suchänderung
onClear : Rückruf, wenn die Schaltfläche „X“ gedrückt wird. Dadurch wird auch onSearchChange mit einer leeren Zeichenfolge aufgerufen.
searchValue : Initialisiert das Eingabefeld. Durch das Ändern dieser Requisite wird der Eingabewert nicht geändert.
onBackPress : Optionale Funktion, Rückruf bei gedrücktem Zurück-Symbol
alwaysShowBackButton : Optionaler Bool, verwenden Sie ihn, wenn Sie immer die Zurück-Schaltfläche anstelle der Suche anzeigen möchten. Der Standardwert ist false
iconCloseName : Optionale Zeichenfolge, verwenden Sie sie, um das Schließsymbol anzupassen
iconSearchName : Optionale Zeichenfolge, verwenden Sie sie, um das Suchsymbol anzupassen
iconBackName : Optionale Zeichenfolge, verwenden Sie sie, um das Zurück-Symbol anzupassen
iconCloseComponent : Optionales Objekt, benutzerdefinierte Komponente für das Schließsymbol (überschreibt iconCloseName)
iconSearchComponent : Optionales Objekt, benutzerdefinierte Komponente für das Suchsymbol (überschreibt iconSearchName)
iconBackComponent : Optionales Objekt, benutzerdefinierte Komponente für das Zurück-Symbol (überschreibt iconBackName)
iconColor : Optionale Zeichenfolge. Verwenden Sie sie, um eine andere Füllgröße zu definieren. Der Standardwert ist #737373
placeholder : Optionale Zeichenfolge, verwenden Sie sie, um den Platzhaltertext anzupassen, Standard ist eSearch...
placeholderColor : Optionale Zeichenfolge. Verwenden Sie sie, um eine andere Platzhalterfarbe zu definieren. Der Standardwert ist #bdbdbd
returnKeyType : Optionale Zeichenfolge. Verwenden Sie sie, um den Rückgabeschlüsseltyp anzupassen
padding : Optionale Zeichenfolge. Verwenden Sie sie, um eine andere Füllgröße zu definieren. Der Standardwert ist 5
inputStyle : Optionale Zeichenfolge. Verwenden Sie sie, um Ihren Stil an die enthaltende View zu übergeben
inputProps : Optionales Objekt, verwenden Sie es, um zusätzliche Requisiten an TextInput zu übergeben, zum Beispiel {autoFocus: true}
textStyle : Optionale Zeichenfolge. Verwenden Sie sie, um Ihren Stil an TextInput zu übergeben