react native material design searchbar

barre de recherche de conception de matériaux natifs

Une barre de recherche React Native Material Design

Installation

Installez la SearchBar à partir de npm avec npm i -S react-native-material-design-searchbar . Ensuite, exigez-le des fichiers JavaScript de votre application avec import SearchBar from 'react-native-material-design-searchbar' . Cette bibliothèque dépend des icônes vectorielles réactives. Veuillez le lier en suivant leur guide d'installation.

Usage

Tous les accessoires sont facultatifs sauf la hauteur.

 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' }
      / >
    ) ;
  }
} ;

Accessoires disponibles

• onSearchChange : Rappel sur changement de recherche
• onClear : Rappel lorsque le bouton 'X' est enfoncé. Cela appelle également onSearchChange avec une chaîne vide.
• searchValue : initialise le champ de saisie. Changer cet accessoire ne modifie pas la valeur d'entrée.
• onBackPress : Fonction optionnelle, Icône de rappel sur retour appuyée
• alwaysShowBackButton : booléen facultatif, à utiliser si vous souhaitez toujours afficher le bouton de retour au lieu de la recherche, la valeur par défaut est false
• iconCloseName : Chaîne facultative, utilisez-la pour personnaliser l'icône de fermeture
• iconSearchName : Chaîne facultative, utilisez-la pour personnaliser l'icône de recherche
• iconBackName : Chaîne facultative, utilisez-la pour personnaliser l'icône de retour
• iconCloseComponent : objet facultatif, composant personnalisé pour l'icône de fermeture (remplace iconCloseName)
• iconSearchComponent : objet facultatif, composant personnalisé pour l'icône de recherche (remplace iconSearchName)
• iconBackComponent : objet facultatif, composant personnalisé pour l'icône de retour (remplace iconBackName)
• iconColor : Chaîne facultative, utilisez-la pour définir une taille de remplissage différente, la valeur par défaut est #737373
• placeholder : chaîne facultative, utilisez-la pour personnaliser le texte de l'espace réservé, la valeur par défaut est eSearch...
• placeholderColor : Chaîne facultative, utilisez-la pour définir une couleur d'espace réservé différente, la valeur par défaut est #bdbdbd
• returnKeyType : Chaîne facultative, utilisez-la pour personnaliser le type de clé de retour
• padding : Chaîne facultative, utilisez-la pour définir une taille de remplissage différente, la valeur par défaut est 5
• inputStyle : chaîne facultative, utilisez-la pour transmettre votre style à la View contenant
• inputProps : objet facultatif, utilisez-le pour transmettre des accessoires supplémentaires au TextInput , par exemple {autoFocus: true}
• textStyle : Chaîne facultative, utilisez-la pour transmettre votre style au TextInput

Le packager React inclura le composant SearchBar dans le package JS de votre application et le rendra disponible pour que votre application puisse l'utiliser.

Contribuer

Les contributions sont les bienvenues.

LICENCE

MIT