React 네이티브 검색 가능한 드롭다운 예제
네이티브 검색 가능 드롭다운 반응
목록(|_+_|)에서 검색하는 데 도움이 되는 검색 가능한 드롭다운으로 단일 항목과 여러 항목을 선택할 수 있습니다.
설치
FlatList속성
| 소품 | 설명 |
| 아이템 | 드롭다운 항목 |
| 기본 인덱스 | 기본적으로 선택된 항목 인덱스입니다. (선택 사항) |
| 텍스트 변경 | 텍스트 변경 시 onTextChange를 전달하고 입력 텍스트를 잡을 수 있습니다. (선택 사항) |
| 항목 선택 | 항목 선택 시 onItemSelect를 전달하고 입력 항목을 잡을 수 있습니다. |
| 컨테이너 스타일 | 구성 요소 컨테이너 스타일 |
| 텍스트 입력 스타일 | TextInput 스타일 |
| 아이템 스타일 | 드롭다운 항목 |
| 항목 텍스트 스타일 | 항목 텍스트 |
| 재설정 값 | true 및 false 상태로 textInput 값 재설정 |
| 자리 표시자 | textInput 자리 표시자 |
| 자리 표시자 텍스트 색상 | textInput 자리 표시자TextColor |
| 항목컨테이너 스타일 | 항목 드롭다운 높이를 제한하기 위해 maxHeight를 전달할 수 있는 항목 컨테이너 스타일 |
| underlineColor안드로이드 | TextInput 밑줄 높이 |
| 목록 소품 | 지원되는 모든 (FlatList) 소품 예: listProps={ nestedScrollEnabled: true } | |
| textInputProps | 지원되는 모든 (TextInput) 소품 예: textInputProps={ underlineColorAndroid: 'transparent' } |
| 세트 정렬 | 텍스트 변경에 대한 데이터 필터링 예: setSort={(item,searchText)=> item.name.toLowerCase().startsWith(searchedText.toLowerCase())} |
| 멀티 | 부울 토글 다중 선택 |
| 선택항목 | 다중 선택의 selectedItems 참고: 다중 prop이 true일 때 작동 |
| 칩 | 부울 토글 칩 디스플레이 모드 참고: multi prop이 true일 때 작동 |
| 항목 제거 | { (item, index) => { } } 참고: multi prop이 true일 때 작동 |
예시
npm install --save react-native-searchable-dropdown 다운로드 세부 정보:
작가: 주바이르파이저
깃허브: https://github.com/zubairpaizer/react-native-searchable-dropdown
#react-native #react #모바일 앱