react native search listダウンロード - react native search listリストソースコードのダウンロード

react native search list

その他のソースコード

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

ダウンロード

中国語のピンインとアルファベット順のインデックスをサポートする検索可能なリストビュー。

React ネイティブ検索リスト

中国語のピンインとアルファベット順のインデックスをサポートする検索可能なリストビュー。

次の図は、構造と 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 >
    )
  }
}

API

小道具名	タイプ	説明	デフォルト値
データ	配列	list view.each オブジェクトの行には`searchStr`含まれている必要があり、検索ソースに使用されます。カスタム行 ID がある場合は、オブジェクトごとに`searchKey`設定する必要があります。
レンダリング行	番号	カスタム行コンテンツをレンダリングします。
行の高さ	番号	デフォルトの行コンテンツの高さ。スクロール計算に使用されます。	`40`
セクションヘッダーの高さ	番号	セクションヘッダーコンテンツの高さ。	`24`
検索リストの背景色	弦	searchList の BackgroundColor。	`#171a23`
ツールバーの背景色	弦	ツールバーの背景色。	`#171a23`
searchBarToggleDuration	番号	カスタム検索バーのアニメーションの長さ。	`300`
検索バーの背景色	弦	カスタム検索バーの背景色。	`#171a23`
検索入力背景色	弦	カスタム検索入力のデフォルト状態の背景色。
searchInputBackgroundColorActive	弦	カスタム検索入力の検索状態の背景色。
検索入力プレースホルダー	弦	カスタム検索入力プレースホルダーテキスト。
検索入力プレースホルダー色	弦	カスタム検索入力プレースホルダーのテキストの色。
検索入力テキストの色	弦	カスタム検索入力のデフォルト状態のテキストの色。
searchInputTextColorActive	弦	カスタム検索入力の検索状態のテキストの色。
検索バーの背景色	弦	カスタム検索バーの背景色。
タイトル	弦	ツールバーのタイトル。
タイトルテキストの色	弦	ツールバーのタイトルのテキストの色。
cancelTextColor	弦	検索バーの文字色をキャンセルします。
キャンセルタイトル	弦	検索バーの文字色をキャンセルします。
セクションインデックステキストの色	弦	セクションインデックスのテキストの色。
セクションリストを隠す	ブール	アルファベット順のセクションリストビューを非表示にするかどうか。
renderSectionIndexItem	機能	カスタムレンダリング SectionIndexItem。
ソート機能	機能	リストビューデータソースのソート機能。デフォルトでアルファベット順にソートされます。
結果ソート関数	機能	検索結果のソート機能、デフォルトで最初に一致した位置でソート
onScrollToSection	機能	アルファベット断面図のコールバックをクリックまたはタッチします。
レンダリング戻るボタン	機能	ツールバーにカスタムの戻るボタンをレンダリングします。
レンダリング空	機能	データが空の場合にビューをレンダリングします。
renderEmptyResult	機能	検索結果が空の場合にビューをレンダリングします。
レンダーセパレーター	機能	行区切り文字をレンダリングします。
renderSectionHeader	機能	内部 ListView の`renderSectionHeader`
レンダリングヘッダー	機能	内部ListViewの`renderHeader`
レンダーフッター	機能	内部 ListView の`renderFooter`
レンダリング行	機能	内部 ListView の`renderRow`
onSearchStart	機能	検索開始時のコールバック。
onSearchEnd	機能	検索終了時のコールバック。