react native dynamic search bar
New tsconfig file is here ?
 |  |
La version 2.0 est là?
J'ai hâte de voir ce que vous allez faire avec cette SearchBar ?
Ajouter la dépendance:
npm i react-native-dynamic-search-barnpm i react-native-spinkitnpm i @freakycoder/react-native-bounceablenpm i WrathChaos/react-native-dynamic-search-bar#exponpm i react-native-animated-spinkitnpm i @freakycoder/react-native-bounceable "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , "react-native-animated-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , import SearchBar from "react-native-dynamic-search-bar" ; < SearchBar
placeholder = "Search here"
onPress = { ( ) => alert ( "onPress" ) }
onChangeText = { ( text ) => console . log ( text ) }
/> Vous pouvez vérifier l'exemple de l'utilisation avancée
< 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" ) }
/> Vous pouvez vérifier l'exemple de l'utilisation avancée du spinner intégré
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 >
) ;
}
}| Propriété | Taper | Défaut | Description |
|---|---|---|---|
| style | Viewstyle | défaut | Définir ou remplacer l'objet de style pour la vue de recherche principale |
| mode noir | booléen | FAUX | Activer le mode sombre |
| onchangetext | fonction | fonction | Définissez votre propre fonction pour la logique OnchangeText |
| mettre en flèche | fonction | fonction | Définissez votre propre fonction pour la fonctionnalité ONPRESS |
| onsearchpress | fonction | fonction | Définissez votre propre fonction pour la fonctionnalité OnPress du bouton de recherche |
| surclace | fonction | fonction | Définissez votre propre fonction pour la fonctionnalité ONPRESS du bouton Effacer |
| onduler | fonction | fonction | Définissez votre propre fonction pour la fonctionnalité ONBLUR de l'entrée de texte |
| onfocus | fonction | fonction | Définissez votre propre fonction pour la fonctionnalité ONBLUR de l'entrée de texte |
| textinputstyle | Stage | défaut | Définir ou remplacer l'objet de style pour l'entrée de texte |
| SearchIconImagestyle | Immeuble | défaut | Définir ou remplacer l'objet de style pour le style d'image de l'icône de recherche |
| ClearIConimagestyle | Immeuble | défaut | Définir ou remplacer l'objet de style pour le style d'image d'icône claire |
| ImageComponent | composant | Image | Définissez votre propre composant d'image au lieu de l'image par défaut de React-Native |
| SearchIconComponent | composant | défaut | Définissez votre propre composant au lieu de l'icône pour le composant de recherche |
| clearIConComponent | composant | défaut | Définissez votre propre composant au lieu de l'icône pour le composant clair |
| SearchIConImageSource | Isource | défaut | Modifier la source d'image de l'icône de recherche |
| ClearIConImageSource | Isource | défaut | Modifier la source d'image d'icône claire |
| ClearIConImageSource | Isource | défaut | Modifier la source d'image d'icône claire |
| espace réservé | chaîne | "Recherche ici ..." | Définissez votre propre chaîne d'espace réservé |
| place de place | couleur | indéfini | Définir la couleur du texte de place |
| spinnercolor | couleur | #fdfdfd | Changez la couleur de la fileuse |
| diviser | nombre | défaut | Changer la taille de la fileuse |
| Spinnertype | composant | Cercle | changer le type de spinner |
| spinnervisibilité | booléen | FAUX | changer la visibilité du spinner |
La barre de recherche dynamique est utilisable avec Expo. Vous avez juste besoin d'ajouter une dépendance par les pairs:
"react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" -> Vous devez ajouter cette ligne de code dans l'application / gradle
apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" -> Vous devez activer la mise en page expérimentale sur l'Android. Voici comment le faire:
import { UIManager } from 'react-native' ;
constructor ( ) {
super ( ) ;
if ( Platform . OS === 'android' ) {
UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
}
}Freakycoder, [email protected]
La bibliothèque de barre de recherche dynamique de React Native est disponible sous la licence MIT. Voir le fichier de licence pour plus d'informations.
