react native search list下載 - react native search list清單原始碼下載

react native search list

其他源碼

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

下載

一個可搜尋的ListView，支援中文拼音和字母索引。

React Native 搜尋列表

一個可搜尋的ListView，支援中文拼音和字母索引。

下圖可能對理解結構和 API 有幫助：

安裝

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

用法

要使用SearchList，需要一個物件陣列作為資料來源，每個物件都有searchStr屬性，範例程式碼放在./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 >
    )
  }
}

蜜蜂

道具名稱	類型	描述	預設值
數據	大批	清單`searchStr`的行。如果您有自訂行 ID，則應該為每個物件設定`searchKey` 。
渲染行	數位	渲染您的自訂行內容。
行高	數位	預設行內容的高度，將用於滾動計算。	`40`
節標題高度	數位	節標題內容的高度。	`24`
搜尋列表背景顏色	細繩	搜尋列表的背景顏色。	`#171a23`
工具列背景顏色	細繩	工具列背景顏色。	`#171a23`
搜尋欄切換持續時間	數位	自訂搜尋欄動畫持續時間。	`300`
搜尋欄背景顏色	細繩	自訂搜尋欄背景顏色。	`#171a23`
搜尋輸入背景顏色	細繩	自訂搜尋輸入預設狀態背景顏色。
搜尋輸入背景顏色活動	細繩	自訂搜尋輸入搜尋狀態背景顏色。
搜尋輸入佔位符	細繩	自訂搜尋輸入佔位符文字。
搜尋輸入佔位符顏色	細繩	自訂搜尋輸入佔位符文字顏色。
搜尋輸入文字顏色	細繩	自訂搜尋輸入預設狀態文字顏色。
搜尋輸入文字顏色活動	細繩	自訂搜尋輸入搜尋狀態文字顏色。
搜尋欄背景顏色	細繩	自訂搜尋欄背景顏色。
標題	細繩	工具列標題。
標題文字顏色	細繩	工具列標題文字顏色。
取消文字顏色	細繩	搜尋欄取消文字顏色。
取消標題	細繩	搜尋欄取消文字顏色。
節索引文字顏色	細繩	部分索引文字顏色。
隱藏節列表	布林值	是否隱藏按字母順序排列的部分清單視圖。
渲染節索引項	功能	自訂渲染SectionIndexItem。
排序函數	功能	清單視圖資料來源的排序功能，預設按字母順序排序
結果排序函數	功能	對搜尋結果的排序功能，預設對第一個符合位置進行排序
滾動到部分	功能	點選或觸碰字母順序視圖的回呼。
渲染後退按鈕	功能	在工具列上渲染自訂後退按鈕。
渲染空	功能	當資料為空時渲染視圖。
渲染空結果	功能	當搜尋結果為空時渲染視圖。
渲染分隔符	功能	渲染行分隔符。
渲染節頭	功能	內部 ListView 的`renderSectionHeader`
渲染頭	功能	內部 ListView 的`renderHeader`
渲染頁腳	功能	內部 ListView 的`renderFooter`
渲染行	功能	內部 ListView 的`renderRow`
搜尋開始時	功能	搜尋開始時的回調。
搜尋結束時	功能	搜尋結束時回調。