react native search list 다운로드 - react native search list 소스코드 다운로드

react native search list

기타 소스코드

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

다운로드

중국어 PinYin 및 알파벳 색인을 지원하는 검색 가능한 ListView입니다.

React 기본 검색 목록

중국어 PinYin 및 알파벳 색인을 지원하는 검색 가능한 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 >
    )
  }
}

아피스

소품 이름	유형	설명	기본값
데이터	정렬	list view.each 개체의 행에는 `searchStr` 포함되어야 하며 검색 소스로 사용됩니다. 사용자 정의 행 ID가 있는 경우 각 개체에 대해 `searchKey` 설정해야 합니다.
렌더 행	숫자	사용자 정의 행 콘텐츠를 렌더링합니다.
행높이	숫자	기본 행 콘텐츠의 높이로, 스크롤 계산에 사용됩니다.	`40`
섹션헤더 높이	숫자	섹션 헤더 콘텐츠의 높이입니다.	`24`
검색목록배경색상	끈	searchList의 배경색입니다.	`#171a23`
도구 모음배경색상	끈	도구 모음 배경색입니다.	`#171a23`
검색바ToggleDuration	숫자	맞춤 검색창 애니메이션 기간.	`300`
검색바배경색	끈	사용자 정의 검색창 배경색.	`#171a23`
검색입력배경색상	끈	맞춤 검색 입력 기본 상태 배경색입니다.
검색입력배경색상활성	끈	사용자 정의 검색 입력 검색 상태 배경색입니다.
검색입력자리 표시자	끈	맞춤 검색 입력 자리표시자 텍스트입니다.
검색입력자리 표시자색상	끈	맞춤 검색 입력 자리표시자 텍스트 색상입니다.
검색입력텍스트색상	끈	맞춤 검색 입력 기본 상태 텍스트 색상입니다.
검색입력텍스트색상활성	끈	사용자 정의 검색 입력 검색 상태 텍스트 색상입니다.
검색바배경색	끈	사용자 정의 검색창 배경색.
제목	끈	툴바 제목.
제목텍스트색상	끈	도구 모음 제목 텍스트 색상입니다.
취소텍스트색상	끈	검색창에서 텍스트 색상을 취소합니다.
취소제목	끈	검색창에서 텍스트 색상을 취소합니다.
sectionIndexTextColor	끈	섹션 색인 텍스트 색상입니다.
hideSectionList	부울	알파벳순 섹션 목록 보기를 숨길지 여부입니다.
renderSectionIndexItem	기능	사용자 정의 렌더링 SectionIndexItem.
sortFunc	기능	목록 보기 데이터 소스의 정렬 기능, 기본적으로 알파벳순으로 정렬
결과SortFunc	기능	검색 결과 정렬 기능, 기본적으로 첫 번째 일치 위치 정렬
onScrollToSection	기능	알파벳 섹션 보기의 콜백은 클릭하거나 터치할 수 있습니다.
렌더링뒤로버튼	기능	툴바에서 사용자 정의 후면 버튼을 렌더링합니다.
렌더비어 있음	기능	데이터가 비어 있을 때 뷰를 렌더링합니다.
renderEmptyResult	기능	검색 결과가 비어 있을 때 뷰를 렌더링합니다.
렌더세퍼레이터	기능	행 구분 기호를 렌더링합니다.
renderSectionHeader	기능	내부 ListView에 대한 `renderSectionHeader`
렌더헤더	기능	내부 ListView에 대한 `renderHeader`
렌더링바닥글	기능	내부 ListView에 대한 `renderFooter`
렌더 행	기능	내부 ListView에 대한 `renderRow`
onSearchStart	기능	검색 시작 시 콜백.
onSearchEnd	기능	검색 종료시 콜백.