Download react native search list - Download des Quellcodes react native search list

react native search list

Anderer Quellcode

修复iphone X系列导航栏高度适配问题

Herunterladen

Eine durchsuchbare ListView, die chinesisches PinYin und einen alphabetischen Index unterstützt.

Reagieren Sie auf die native Suchliste

Eine durchsuchbare ListView, die chinesisches PinYin und einen alphabetischen Index unterstützt.

Das folgende Bild kann hilfreich sein, um die Struktur und APIs zu verstehen:

Installation

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

Verwendung

Um SearchList zu verwenden, benötigen Sie ein Array von Objekten als Datenquelle und jedes Objekt verfügt über die Eigenschaft searchStr. Beispielcode wird in ./entry.js eingefügt.

 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

Requisitenname	Typ	Beschreibung	Standardwert
Daten	Array	Die Zeilen der Listenansicht. Jedes Objekt sollte `searchStr` enthalten, es wird als Suchquelle verwendet. Wenn Sie eine benutzerdefinierte Zeilen-ID haben, sollten Sie `searchKey` für jedes Objekt festlegen.
renderRow	Nummer	Rendern Sie Ihren benutzerdefinierten Zeileninhalt.
rowHeight	Nummer	Die Höhe des Standardzeileninhalts, sie wird für die Scrollberechnung verwendet.	`40`
sectionHeaderHeight	Nummer	Die Höhe des Inhalts der Abschnittsüberschrift.	`24`
searchListBackgroundColor	Zeichenfolge	Hintergrundfarbe für Suchliste.	`#171a23`
SymbolleisteHintergrundfarbe	Zeichenfolge	Hintergrundfarbe der Symbolleiste.	`#171a23`
searchBarToggleDuration	Nummer	Benutzerdefinierte Animationsdauer der Suchleiste.	`300`
searchBarBackgroundColor	Zeichenfolge	Benutzerdefinierte Hintergrundfarbe der Suchleiste.	`#171a23`
searchInputBackgroundColor	Zeichenfolge	Standardhintergrundfarbe für benutzerdefinierte Sucheingaben.
searchInputBackgroundColorActive	Zeichenfolge	Benutzerdefinierte Sucheingabe, Hintergrundfarbe für den Suchstatus.
searchInputPlaceholder	Zeichenfolge	Benutzerdefinierter Platzhaltertext für die Sucheingabe.
searchInputPlaceholderColor	Zeichenfolge	Benutzerdefinierte Textfarbe für den Platzhalter für die Sucheingabe.
searchInputTextColor	Zeichenfolge	Benutzerdefinierte Standardtextfarbe für die Sucheingabe.
searchInputTextColorActive	Zeichenfolge	Benutzerdefinierte Sucheingabe, Textfarbe für den Suchstatus.
searchBarBackgroundColor	Zeichenfolge	Benutzerdefinierte Hintergrundfarbe für die Suchleiste.
Titel	Zeichenfolge	Titel der Symbolleiste.
titleTextColor	Zeichenfolge	Textfarbe für Symbolleistentitel.
cancelTextColor	Zeichenfolge	Textfarbe der Suchleiste abbrechen.
cancelTitle	Zeichenfolge	Textfarbe der Suchleiste abbrechen.
sectionIndexTextColor	Zeichenfolge	Textfarbe des Abschnittsindex.
hideSectionList	bool	Ob die alphabetische Abschnittslistenansicht ausgeblendet werden soll oder nicht.
renderSectionIndexItem	Funktion	Benutzerdefiniertes Rendering von SectionIndexItem.
sortFunc	Funktion	Die Sortierfunktion für die Datenquelle der Listenansicht, die standardmäßig alphabetisch sortiert
resultSortFunc	Funktion	Die Sortierfunktion für das Suchergebnis, die standardmäßig nach der ersten Übereinstimmungsposition sortiert
onScrollToSection	Funktion	Der Rückruf der alphabetischen Schnittansicht kann angeklickt oder berührt werden.
renderBackButton	Funktion	Rendern Sie eine benutzerdefinierte Zurück-Schaltfläche in der Symbolleiste.
renderEmpty	Funktion	Rendern Sie eine Ansicht, wenn die Daten leer sind.
renderEmptyResult	Funktion	Rendern Sie eine Ansicht, wenn das Suchergebnis leer ist.
renderSeparator	Funktion	Zeilentrennzeichen rendern.
renderSectionHeader	Funktion	`renderSectionHeader` für die interne ListView
renderHeader	Funktion	`renderHeader` für die interne ListView
renderFooter	Funktion	`renderFooter` für die interne ListView
renderRow	Funktion	`renderRow` für die interne ListView
onSearchStart	Funktion	Rückruf bei Suchstart.
onSearchEnd	Funktion	Rückruf bei Suchende.