react native search list

Un ListView consultable qui prend en charge le PinYin chinois et l'index alphabétique.

Liste de recherche native React

Un ListView consultable qui prend en charge le PinYin chinois et l'index alphabétique.

L'image suivante peut être utile pour comprendre la structure et les API :

Installation

$ npm install @unpourtous/react-native-search-list --save

Usage

Pour utiliser SearchList, vous avez besoin d'un tableau d'objets comme source de données et chaque objet a la propriété searchStr, un exemple de code est placé dans ./entry.js .

 export default class example extends Component {
  constructor ( props ) {
    super ( props )
    this . state = {
      dataSource : demoList
    }
  }

  // custom render row
  renderRow ( item , sectionID , rowID , highlightRowFunc , isSearching ) {
    return (
      < Touchable onPress = { ( ) => {
        Alert . alert ( 'Clicked!' , `sectionID: ${ sectionID } ; item: ${ item . searchStr } ` ,
          [
            { text : 'OK' , onPress : ( ) => console . log ( 'OK Pressed' ) } ,
          ] ,
          { cancelable : true } )
      } } >
        < View key = { rowID } style = { { flex : 1 , marginLeft : 20 , height : rowHeight , justifyContent : 'center' } } >
          { /*use `HighlightableText` to highlight the search result*/ }
          < HighlightableText
            matcher = { item . matcher }
            text = { item . searchStr }
            textColor = { '#000' }
            hightlightTextColor = { '#0069c0' }
          / >
        < / View >
      < / Touchable >
    )
  }

  // render empty view when datasource is empty
  renderEmpty ( ) {
    return (
      < View style = { styles . emptyDataSource } >
        < Text style = { { color : '#979797' , fontSize : 18 , paddingTop : 20 } } > No Content < / Text >
      < / View >
    )
  }

  // render empty result view when search result is empty
  renderEmptyResult ( searchStr ) {
    return (
      < View style = { styles . emptySearchResult } >
        < Text style = { { color : '#979797' , fontSize : 18 , paddingTop : 20 } } > No Result For < Text
          style = { { color : '#171a23' , fontSize : 18 } } > { searchStr } < / Text > < / Text >
        < Text style = { { color : '#979797' , fontSize : 18 , alignItems : 'center' , paddingTop : 10 } } > Please search again < / Text >
      < / View >
    )
  }

  render ( ) {
    return (
      < View style = { styles . container } >
        < StatusBar backgroundColor = '#F00' barStyle = 'light-content' / >
        < SearchList
          data = { this . state . dataSource }
          renderRow = { this . renderRow . bind ( this ) }
          renderEmptyResult = { this . renderEmptyResult . bind ( this ) }
          renderBackButton = { ( ) => null }
          renderEmpty = { this . renderEmpty . bind ( this ) }

          rowHeight = { rowHeight }

          toolbarBackgroundColor = { '#2196f3' }
          title = 'Search List Demo'
          cancelTitle = '取消'
          onClickBack = { ( ) => { } }

          searchListBackgroundColor = { '#2196f3' }

          searchBarToggleDuration = { 300 }

          searchInputBackgroundColor = { '#0069c0' }
          searchInputBackgroundColorActive = { '#6ec6ff' }
          searchInputPlaceholderColor = { '#FFF' }
          searchInputTextColor = { '#FFF' }
          searchInputTextColorActive = { '#000' }
          searchInputPlaceholder = 'Search'
          sectionIndexTextColor = { '#6ec6ff' }
          searchBarBackgroundColor = { '#2196f3' }
        / >
      < / View >
    )
  }
} 

Apis

nom de l'accessoire	taper	description	valeur par défaut
données	tableau	Les lignes de list view.each objet doivent contenir searchStr , il sera utilisé pour la source de recherche. Si vous avez un identifiant de ligne personnalisé, vous devez définir searchKey pour chaque objet.
RenderRow	nombre	Affichez le contenu de votre ligne personnalisée.
hauteur de ligne	nombre	La hauteur du contenu de la ligne par défaut, elle sera utilisée pour le calcul du défilement.	40
sectionHeureEn-Tête	nombre	La hauteur du contenu de l’en-tête de section.	24
searchListBackgroundColor	chaîne	Couleur d'arrière-plan pour la liste de recherche.	#171a23
barre d'outilsCouleur d'arrière-plan	chaîne	Couleur d’arrière-plan de la barre d’outils.	#171a23
searchBarToggleDuration	nombre	Durée de l'animation de la barre de recherche personnalisée.	300
searchBarBackgroundColor	chaîne	Couleur d’arrière-plan de la barre de recherche personnalisée.	#171a23
searchInputBackgroundColor	chaîne	Couleur d’arrière-plan de l’état par défaut de l’entrée de recherche personnalisée.
searchInputBackgroundColorActive	chaîne	Couleur d'arrière-plan de l'état de recherche d'entrée de recherche personnalisée.
searchInputPlaceholder	chaîne	Texte d'espace réservé de saisie de recherche personnalisé.
searchInputPlaceholderColor	chaîne	Couleur du texte de l'espace réservé de saisie de recherche personnalisée.
searchInputTextColor	chaîne	Couleur du texte de l'état par défaut de l'entrée de recherche personnalisée.
searchInputTextColorActive	chaîne	Couleur du texte de l'état de recherche d'entrée de recherche personnalisée.
searchBarBackgroundColor	chaîne	Couleur d’arrière-plan de la barre de recherche personnalisée.
titre	chaîne	Titre de la barre d'outils.
titreTextColor	chaîne	Couleur du texte du titre de la barre d’outils.
annulerTextColor	chaîne	La barre de recherche annule la couleur du texte.
annulerTitre	chaîne	La barre de recherche annule la couleur du texte.
sectionIndexTextColor	chaîne	Couleur du texte de l’index de section.
masquerListeSection	bouffon	S'il faut masquer ou non la vue de la liste des sections alphabétiques.
renderSectionIndexItem	fonction	Rendu personnalisé SectionIndexItem.
sortFunc	fonction	La fonction de tri pour la source de données de la vue liste, tri alphabétique par défaut
résultatSortFunc	fonction	La fonction de tri pour le résultat de la recherche, triant la première position de correspondance par défaut
surDéfilementVersSection	fonction	Le rappel de la vue en coupe alphabétique doit être cliqué ou touché.
bouton de renduRetour	fonction	Affichez un bouton de retour personnalisé sur la barre d'outils.
renduVide	fonction	Afficher une vue lorsque les données sont vides.
renduVideRésultat	fonction	Afficher une vue lorsque le résultat de la recherche est vide.
renduSéparateur	fonction	Séparateur de lignes de rendu.
renduSectionHeader	fonction	renderSectionHeader pour le ListView interne
En-tête de rendu	fonction	renderHeader pour le ListView interne
pied de page de rendu	fonction	renderFooter pour le ListView interne
RenderRow	fonction	renderRow pour le ListView interne
onSearchStart	fonction	Rappel au démarrage de la recherche.
onSearchEnd	fonction	Rappel à la fin de la recherche.

Merci

• js-pinyin
• md5
• réagir-native-selectablesectionlistview

FAIRE

1. ajouter une démo en surbrillance
2. tester iOS & Android & Android avec barre d'état et sans

Nos autres projets

• WeTrident : un framework de développement d'applications simple basé sur React Native.
• WT-Console : utilitaires de journalisation en temps réel dans l'application React Native.
• React Native Popup Stub : un conteneur contextuel intelligent.
• WT Console Server : un backend de gestionnaire de journaux open source.

Licence

Cette bibliothèque est distribuée sous licence MIT.