ดาวน์โหลด react native search list - ดาวน์โหลด react native search list ดาวน์โหลดซอร์สโค้ด

react native search list

ซอร์สโค้ดอื่น ๆ

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

ดาวน์โหลด

ListView ที่ค้นหาได้ซึ่งรองรับพินอินภาษาจีนและดัชนีตัวอักษร

โต้ตอบรายการค้นหาเนทีฟ

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

API

ชื่ออุปกรณ์ประกอบฉาก	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
ข้อมูล	อาร์เรย์	แถวของรายการ view.each วัตถุควรมี `searchStr` ซึ่งจะใช้สำหรับแหล่งการค้นหา หากคุณมีรหัสแถวที่กำหนดเอง คุณควรตั้งค่า `searchKey` สำหรับแต่ละออบเจ็กต์
ทำให้Row	ตัวเลข	แสดงผลเนื้อหาแถวที่คุณกำหนดเอง
แถวความสูง	ตัวเลข	ความสูงของเนื้อหาแถวเริ่มต้นก็จะใช้ในการคำนวณการเลื่อน	`40`
ส่วน HeaderHeight	ตัวเลข	ความสูงของเนื้อหาส่วนหัวของส่วน	`24`
searchListBackgroundColor	เชือก	สีพื้นหลังสำหรับรายการค้นหา	`#171a23`
แถบเครื่องมือพื้นหลังสี	เชือก	สีพื้นหลังของแถบเครื่องมือ	`#171a23`
searchBarToggleDuration	ตัวเลข	ระยะเวลาภาพเคลื่อนไหวของแถบค้นหาที่กำหนดเอง	`300`
searchBarBackgroundColor	เชือก	สีพื้นหลังของแถบค้นหาที่กำหนดเอง	`#171a23`
ค้นหาInputBackgroundColor	เชือก	สีพื้นหลังสถานะเริ่มต้นของการค้นหาที่กำหนดเอง
ค้นหาInputBackgroundColorActive	เชือก	สีพื้นหลังของสถานะการค้นหาอินพุตการค้นหาที่กำหนดเอง
searchInputPlaceholder	เชือก	ข้อความตัวยึดตำแหน่งอินพุตการค้นหาที่กำหนดเอง
searchInputPlaceholderColor	เชือก	สีข้อความตัวยึดตำแหน่งอินพุตการค้นหาที่กำหนดเอง
ค้นหาInputTextColor	เชือก	สีข้อความสถานะเริ่มต้นของการป้อนข้อมูลการค้นหาแบบกำหนดเอง
ค้นหาInputTextColorActive	เชือก	สีข้อความสถานะการค้นหาที่กำหนดเอง
searchBarBackgroundColor	เชือก	สีพื้นหลังของแถบค้นหาที่กำหนดเอง
ชื่อ	เชือก	ชื่อแถบเครื่องมือ
titleTextColor	เชือก	สีข้อความชื่อแถบเครื่องมือ
ยกเลิกTextColor	เชือก	แถบค้นหายกเลิกสีข้อความ
ยกเลิกหัวข้อ	เชือก	แถบค้นหายกเลิกสีข้อความ
ส่วนIndexTextColor	เชือก	สีข้อความดัชนีส่วน
ซ่อนส่วนรายการ	บูล	ไม่ว่าจะซ่อนมุมมองรายการส่วนตามตัวอักษรหรือไม่
renderSectionIndexItem	ฟังก์ชั่น	การแสดงผลแบบกำหนดเอง SectionIndexItem
sortFunc	ฟังก์ชั่น	ฟังก์ชันการเรียงลำดับสำหรับแหล่งข้อมูลมุมมองรายการ เรียงลำดับตามตัวอักษรตามค่าเริ่มต้น
resultSortFunc	ฟังก์ชั่น	ฟังก์ชั่นการเรียงลำดับสำหรับผลการค้นหา เรียงลำดับตำแหน่งที่ตรงกันตามค่าเริ่มต้น
onScrollToSection	ฟังก์ชั่น	การเรียกกลับของมุมมองส่วนตัวอักษรสามารถคลิกหรือสัมผัสได้
renderBackButton	ฟังก์ชั่น	แสดงผลปุ่มด้านหลังแบบกำหนดเองบน Toolbar
ทำให้ว่างเปล่า	ฟังก์ชั่น	แสดงผลมุมมองเมื่อข้อมูลว่างเปล่า
renderEmptyResult	ฟังก์ชั่น	แสดงผลมุมมองเมื่อผลการค้นหาว่างเปล่า
renderSeparator	ฟังก์ชั่น	แสดงผลตัวคั่นแถว
renderSectionHeader	ฟังก์ชั่น	`renderSectionHeader` สำหรับ ListView ภายใน
renderHeader	ฟังก์ชั่น	`renderHeader` สำหรับ ListView ภายใน
renderFooter	ฟังก์ชั่น	`renderFooter` สำหรับ ListView ภายใน
ทำให้Row	ฟังก์ชั่น	`renderRow` สำหรับ ListView ภายใน
บนSearchStart	ฟังก์ชั่น	โทรกลับเมื่อเริ่มต้นการค้นหา
ในการค้นหาสิ้นสุด	ฟังก์ชั่น	โทรกลับเมื่อสิ้นสุดการค้นหา