react native dynamic search bar

Eingebauter Spinner

Version 2.0?

Version 2.0 ist hier?

• Völlig neu von Grund auf neu geschrieben?
• Viel bessere Codierung für Wartung und weniger Abhängigkeit
• 3 Abhängigkeiten werden entfernt?
• Besseres Requisitenmanagement und coole Anpassungen sind jetzt möglich
• Integration des Dunklen Modus?

Ich kann es kaum erwarten zu sehen, was Sie mit dieser SearchBar machen werden?

Installation

Fügen Sie die Abhängigkeit hinzu:

Reagieren Sie nativ

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

Expo -Version

npm i WrathChaos/react-native-dynamic-search-bar#expo

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

Peer -Abhängigkeiten

WICHTIG! Sie müssen sie installieren

 "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , 

Expo -Peer -Abhängigkeiten

WICHTIG! Sie müssen sie installieren

 "react-native-animated-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" ,

Verwendung

Import

 import SearchBar from "react-native-dynamic-search-bar" ; 

Grundnutzung

 < SearchBar
  placeholder = "Search here"
  onPress = { ( ) => alert ( "onPress" ) }
  onChangeText = { ( text ) => console . log ( text ) }
/> 

Erweiterte Verwendung

Sie können das Beispiel für die erweiterte Verwendung überprüfen

 < SearchBar
  fontColor = "#c6c6c6"
  iconColor = "#c6c6c6"
  shadowColor = "#282828"
  cancelIconColor = "#c6c6c6"
  backgroundColor = "#353d5e"
  placeholder = "Search here"
  onChangeText = { ( text ) => this . filterList ( text ) }
  onSearchPress = { ( ) => console . log ( "Search Icon is pressed" ) }
  onClearPress = { ( ) => this . filterList ( "" ) }
  onPress = { ( ) => alert ( "onPress" ) }
/> 

Fortgeschrittene Eingebrauchspinner-Nutzung

Sie können das Beispiel für die erweiterte integrierte Spinner-Nutzung überprüfen

 import React , { Component } from "react" ;
import { View } from "react-native" ;
import SearchBar from "react-native-dynamic-search-bar" ;

export default class Test extends Component {
  handleOnChangeText = ( text ) => {
    // ? Visible the spinner
    this . setState ( {
      searchText : text ,
      spinnerVisibility : true ,
    } ) ;

    // ? After you've done to implement your use-case
    // ? Do not forget to set false to spinner's visibility
    this . setState ( {
      spinnerVisibility : false ,
    } ) ;
  } ;

  render ( ) {
    const { spinnerVisibility } = this . state ;
    return (
      < View >
        < SearchBar
          height = { 50 }
          fontSize = { 24 }
          fontColor = "#fdfdfd"
          iconColor = "#fdfdfd"
          shadowColor = "#282828"
          cancelIconColor = "#fdfdfd"
          backgroundColor = "#ba312f"
          spinnerVisibility = { spinnerVisibility }
          placeholder = "Search any cosmetics ..."
          fontFamily = "BurbankBigCondensed-Black"
          shadowStyle = { styles . searchBarShadowStyle }
          onChangeText = { this . handleOnChangeText }
        />
      </ View >
    ) ;
  }
}

Konfiguration - Requisiten

Eigentum	Typ	Standard	Beschreibung
Stil	ViewStyle	Standard	Setzen oder überschreiben Sie das Style -Objekt für die Hauptsuchansicht
Darkmode	boolean	FALSCH	Aktivieren Sie den dunklen Modus
onchangetext	Funktion	Funktion	Legen Sie Ihre eigene Funktion für die Onchangetext -Logik fest
Onpress	Funktion	Funktion	Legen Sie Ihre eigene Funktion für die Onpress -Funktionalität fest
OnsearchPress	Funktion	Funktion	Stellen Sie Ihre eigene Funktion für die Onpress -Funktionalität der Suchstaste ein
Onclearpress	Funktion	Funktion	Stellen Sie Ihre eigene Funktion für die Onpress -Funktionalität der Löschen -Taste ein
Onblur	Funktion	Funktion	Legen Sie Ihre eigene Funktion für die Onblur -Funktionalität der Texteingabe fest
Onfokus	Funktion	Funktion	Legen Sie Ihre eigene Funktion für die Onblur -Funktionalität der Texteingabe fest
textInputStyle	Textstyle	Standard	Stellen oder überschreiben Sie das Stilobjekt für die Texteingabe
Searchiconimagestyle	Imagestyle	Standard	Setzen oder überschreiben Sie das Style -Objekt für den Bildstil des Suchymbols
Cleariconimagestyle	Imagestyle	Standard	Setzen oder überschreiben Sie das Stilobjekt für den Bildstil des klaren Symbolbilds
ImageComponent	Komponente	Bild	Stellen Sie Ihre eigene Bildkomponente anstelle des Standardbildes von React-Native ein
SearchiconComponent	Komponente	Standard	Stellen Sie Ihre eigene Komponente anstelle des Symbols für die Suchkomponente ein
Cleariconcomponent	Komponente	Standard	Stellen Sie Ihre eigene Komponente anstelle des Symbols für die klare Komponente ein
Searchiconimagesource	Isource	Standard	Ändern Sie die Such -Symbolbildquelle
Cleariconimagesource	Isource	Standard	Ändern Sie die Bildquelle der klaren Symbolbild
Cleariconimagesource	Isource	Standard	Ändern Sie die Bildquelle der klaren Symbolbild
Platzhalter	Saite	"Suchen Sie hier ..."	Stellen Sie Ihre eigene Platzhalterschnur fest
PlaceholdatextColor	Farbe	undefiniert	Setzen Sie Platzhaltertextfarbe
Spinnercolor	Farbe	#fdfdfd	Ändern Sie die Spinnerfarbe
Spinnerize	Nummer	Standard	Ändern Sie die Spinnergröße
Spinnertyp	Komponente	Kreis	Ändern Sie den Spinnertyp
Spinnervissibilität	boolean	FALSCH	Ändern Sie die Sichtbarkeit der Spinner

Expo -Kompatibilität

Dynamische Suchleiste können mit Expo verwendet werden. Sie müssen nur eine Peer -Abhängigkeit hinzufügen:

 "react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" 

Bekannte Probleme

Android

Vektorikonen zeigen nicht: o

-> Sie müssen diese Codezeile in App/Gradle hinzufügen

 apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" 

Animationen funktionieren nicht wie das Beispiel auf dem Android?

-> Sie müssen experimentelle Layoutanimation auf dem Android aktivieren. Hier erfahren Sie, wie es geht:

 import { UIManager } from 'react-native' ;

constructor ( ) {
    super ( ) ;
    if ( Platform . OS === 'android' ) {
      UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
    }
}

Roadmap

• Vollständig mit besserer Codierung und weniger Abhängigkeit umgeschrieben
• Voller Code -Refactoring mit besserem Typenkript
• LIZENZ
• Schreiben Sie einen Artikel über die LIB auf Medium
• TypeScript Challenge!
• Aktualisieren Sie die Expo -Version auf die neuesten Funktionen
• Eingebaute Schattenstilentfernung
• Beispiel für Wrapper Shadow zur Dokumentation
• Besseres Beispiel und GIFs

Autor

FreakyCoder, [email protected]

Lizenz

React native Dynamic Suchbalkenbibliothek ist unter der MIT -Lizenz verfügbar. Weitere Informationen finden Sie in der Lizenzdatei.