리뷰-React Native Searchable Dropdown-검색 히스토리, 최근 검색 기능

Searchable Dropdown은 내가 가지고있는 list(FlatList)에서 찾는 것을 도와주고 list의 element를 뽑을수 있는 모듈이다.

 

먼저 prob들을 살펴보자.

 

items	드롭다운시 보여줄 아이템의 리스트 이다.
defaultIndex	디폴트 아이템을 정할수 있다.
onTextChange	택스트가 변경되면 onTextChange가 실행된다. 그리고  input text를  argu로 사용할수 있다.
onItemSelect	아이템이 선택되면 onitemSelect를 실행시킬수있다. 그리고 input 아이템을 argu로 사용할수 있다,
containerStyle	컨테이너의 스타일 파트이다. ex) containerStyle ={ { padding :5 } }
textInputStyle	택스트의 스타일 파트이다. 위와같이 리액트에서 한던데로 스타일을 사용할수 있다.
itemStyle	드롭다운된 아이템의 스타일 파트이다.
itemTextStyle	드롭다운된 아이템의 text 스타일 이다.
resetValue	textInput의 리셋여부를 결정한다.
placeholder	textInput의 placeholder이다.
placeholderTextColor	textInput placeholder의 색을 정한다.
itemsContainerStyle	maxHeight를 정하여 드롭다운의 최대 길이를 설정할수있다.
underlineColorAndroid	뭔말인지 모르겠다????????? 혹시 아시는분은 댓글로 달아주시면 감사하겠습니다.
listProps	FlatLIst의 모든 probs이다. example: listProps={ nestedScrollEnabled: true }
textInputProps	모든 textinput의 probs이다. example: textInputProps={ underlineColorAndroid: 'transparent' }
setSort	텍스트가 변경됨에 따라 FlatLIst의 데이터를 필터링한다.  example: setSort={(item, searchedText)=> item.name.toLowerCase().startsWith(searchedText.toLowerCase())}
multi	multi선택을 허용할것인지 아닌지 선택한다. boolean toggle multi selection
selectedItems	selectedItems of multi selection note: work when if multi prop is true
chip	boolean toggle chip display mode note: work when if multi prop is true
onRemoveItem	{ (item, index) => { } } note: work when if multi prop is true

 

FlatLIst 다루기

 

추가적으로 데이터는 sqlite 또는 asyncstorage를 사용하면된다. asyncstorage를 쓰면 json data를 string으로 저장하고 (stringify) 사용할때는 parse를 이용해서 데이터를 꺼내오면된다.