react native search list تنزيل - react native search list تنزيل كود المصدر

react native search list

شفرة المصدر الأخرى

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

تنزيل

ListView قابل للبحث ويدعم نظام PinYin الصيني والفهرس الأبجدي.

رد فعل قائمة البحث الأصلية

ListView قابل للبحث ويدعم نظام PinYin الصيني والفهرس الأبجدي.

قد تكون الصورة التالية مفيدة عند فهم البنية وواجهات برمجة التطبيقات:

تثبيت

$ 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 >
    )
  }
}

واجهات برمجة التطبيقات

اسم الدعامة	يكتب	وصف	القيمة الافتراضية
بيانات	صفيف	يجب أن تحتوي صفوف كائن view.each على `searchStr` ، وسيتم استخدامه لمصدر البحث. إذا كان لديك معرف صف مخصص، فيجب عليك تعيين `searchKey` لكل كائن.
renderRow	رقم	قم بعرض محتوى الصف المخصص الخاص بك.
RowHeight	رقم	سيتم استخدام ارتفاع محتوى الصف الافتراضي لحساب التمرير.	`40`
sectionHeaderHeight	رقم	ارتفاع محتوى رأس القسم.	`24`
searchListBackgroundColor	خيط	لون الخلفية لقائمة البحث.	`#171a23`
لون شريط الأدوات	خيط	لون خلفية شريط الأدوات	`#171a23`
searchBarToggleDuration	رقم	مدة الرسوم المتحركة لشريط البحث المخصص.	`300`
searchBarBackgroundColor	خيط	لون خلفية شريط البحث المخصص.	`#171a23`
searchInputBackgroundColor	خيط	لون خلفية الحالة الافتراضية لإدخال البحث المخصص.
searchInputBackgroundColorActive	خيط	إدخال بحث مخصص يبحث عن لون خلفية الحالة.
searchInputPlaceholder	خيط	نص العنصر النائب لإدخال البحث المخصص.
searchInputPlaceholderColor	خيط	لون نص العنصر النائب لإدخال البحث المخصص.
searchInputTextColor	خيط	لون نص الحالة الافتراضية لإدخال البحث المخصص.
searchInputTextColorActive	خيط	إدخال بحث مخصص يبحث عن لون نص الحالة.
searchBarBackgroundColor	خيط	لون خلفية شريط البحث المخصص.
عنوان	خيط	عنوان شريط الأدوات.
titleTextColor	خيط	لون نص عنوان شريط الأدوات.
CancelTextColor	خيط	شريط البحث يلغي لون النص.
CancelTitle	خيط	شريط البحث يلغي لون النص.
sectionIndexTextColor	خيط	لون نص فهرس القسم.
hideSectionList	منطقي	ما إذا كان سيتم إخفاء عرض قائمة الأقسام الأبجدية أم لا.
renderSectionIndexItem	func	عرض مخصص DivisionIndexItem.
com.sortFunc	func	وظيفة الفرز لمصدر بيانات عرض القائمة، والفرز أبجديًا بشكل افتراضي
resultSortFunc	func	وظيفة الفرز لنتيجة البحث، وفرز موضع المطابقة الأول افتراضيًا
onScrollToSection	func	يمكن النقر فوق رد الاتصال لعرض القسم الأبجدي أو لمسه.
renderBackButton	func	عرض زر خلفي مخصص على شريط الأدوات.
renderEmpty	func	تقديم طريقة عرض عندما تكون البيانات فارغة.
renderEmptyResult	func	تقديم عرض عندما تكون نتيجة البحث فارغة.
renderSeparator	func	عرض فاصل الصفوف.
renderSectionHeader	func	`renderSectionHeader` لعرض القائمة الداخلي
renderHeader	func	`renderHeader` لعرض ListView الداخلي
renderFooter	func	`renderFooter` لعرض القائمة الداخلي
renderRow	func	`renderRow` لعرض ListView الداخلي
onSearchStart	func	رد الاتصال عند بدء البحث.
onSearchEnd	func	رد الاتصال عند انتهاء البحث.