react native complete flatlist
Accept all props for
검색, 새로 고침, 새로 고침, 데이터 사용 가능 메시지와 같은 많은 내장 기능이있는 React Native Flat 목록의 확장 버전
주의:
renderItem Props 반환 item 및 index 매개 변수 item 매개 변수는 item 배열에서 단일 요소를 반환합니다. 그러나 검색 텍스트가 비어 있지 않은 경우 DAN highlightColor Props가 모든 색상으로 설정되면 item 매개 변수는 JSON 객체의 새 구조를 반환합니다 (JSX에서 강조 표시된 텍스트를 렌더링하기 위해). 이것은 당신의 논리를 깨뜨릴 수 있습니다. 따라서 데이터의 원래 구조에 액세스하려면 item.cleanData 에 있습니다. item.cleanData highlightColor Props 및 Search TextField가 비어 있지 않은 경우에만 존재합니다 (사용자가 검색 중)
용법 :
import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';
const list = [
{ name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
{ name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
{ name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
{ name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
{ name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
{ name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
{ name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
{ name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
{ name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
{
name: 'Muhyiddeen',
status: 'Blocked',
time: '10:10 PM',
date: '9 Feb 2018',
},
];
const App = () => {
const ref = useRef();
const renderItem = ({item, index}) => {
const data = item.cleanData ? item.cleanData : item;
console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);
console.log('this is index number : ' + index);
console.log(data + ' this is original data');
return <Text>{item.name}</Text>;
};
return (
<SafeAreaView style={{ flex: 1 }}>
<CompleteFlatList
searchKey={['name', 'status', 'time', 'date']}
pullToRefreshCallback={() => console.log('refreshing')}
data={list}
// renderSeparator={null}
ref={ref}
highlightColor="yellow"
renderItem={renderItem}
/>
<TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
<Text>Clear Search</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
export default App;
renderItem={(data, index) => {} } renderItem={({item, index, separators}) => {} } 에서 변경 (원래 flatlist의 ON과 비슷합니다).
모든 플랫리스트 소품은 아래에 언급 된 소품과 소품이 작동해야합니다
| 소품 | 유형 | 설명 | 기본 | 필수의 |
|---|---|---|---|---|
showSearch | 부울 | true (및 searchKey Prop가 정의 된 경우) 검색 표시 줄이 표시됩니다. | 진실 | 선택 과목 |
isJelly | 부울 | true 경우 사용자 스크롤이되면 목록이 LIL 비트를 확장하고 사용자가 드래그를 중지하면 목록이 원래 크기로 돌아갑니다 (iPhone 스타일의 iMessage). | 거짓 | 선택 과목 |
slide | 끈 | 애니메이션 모든 항목이 목록에 들어가는 방법. "없음", "왼쪽"또는 "오른쪽"일 수 있습니다. | none | 선택 과목 |
data | 객체 배열 | 목록에서 렌더링 할 데이터 | [] | 필수 (와서, 이에 대한 데이터가 필요합니다) |
backgroundStyles | 스타일 객체 | 플랫리스트 배경의 스타일 | 널 | 선택 과목 |
searchBarBackgroundStyles | 스타일 객체 | Searchbar 배경의 스타일 | 널 | 선택 과목 |
pullToRefreshCallback | 기능 | 콜백 기능 사용자가 새로 고침을 당기는 경우 | 널 | 선택 사항 (이를 제공하지 않으면 새로 고침을 사용할 수 없습니다. |
isLoading | 부울 | 사실이라면 로딩이 목록 위에 표시됩니다. | 거짓 | 선택 과목 |
renderItem | JSX 요소를 반환하는 함수 (RN의 ListView 및 Flatlist와 유사) | 평평한 목록의 행 템플릿 | NULL (누군가가 기본 템플릿을 만들고 싶다면 PR을 위해 개방) | 필수 (아직 기본 템플릿을하지 않기 때문에) |
renderSeparator | 행 사이에 렌더링 할 JSX 요소를 반환하는 함수 (RN의 ListView 및 Flatlist와 마찬가지로) | 평평한 목록의 분리기 템플릿 | () => <View style={{ height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" }} /> | 선택 과목 |
placeholder | 끈 | 검색 필드의 자리 표시 자 | "찾다 ..." | 선택 과목 |
searchTextInputStyle | 객체 (React Native의 Textinput 구성 요소를위한 스타일) | 검색 필드 스타일 | 널 | 선택 과목 |
highlightColor | 색상 | 일치하는 검색 키워드 일 때 Higlight가있는 단어 배경의 색상. Readme 위에이 소품을 사용하는 경우 사전주의 사항을 읽으십시오. | 노란색 | 선택 과목 |
searchKey | 문자열 배열 | 검색에 사용할 데이터에서 사용 가능한 키 이름이어야합니다. 이 소품이 제공되지 않으면 검색 텍스트 입력이 렌더링되지 않습니다. **Warning: nested key not yet supported | [] | 선택 사항 (제공되지 않으면 검색 필드가 나타나지 않습니다) |
elementBetweenSearchAndList | JSX 요소 | SearchBar와 목록 사이에 렌더링 할 내용 | 널 | 선택 과목 |
refreshOnLoad | 부울 | true 이라면 Prop pullToRefreshCallback 사용 가능한 경우 호출됩니다. | 진실 | 선택 과목 |
onSearch | pullToRefreshCallback 대체하는 함수 | 존재하면 pullToRefreshCallback 과도하게됩니다. 키 프레스에서는 트리거되지 않고 리턴 키가 눌렀습니다. 이 소품은 API에서 검색 트리거가 결과를 보인 경우 소개됩니다. 로컬 검색 (기존 배열에서 검색) 만 원한다면이 소품이 필요하지 않습니다. onSearch 자동으로 keyword 매개 변수를 얻습니다 | () => null | 선택 과목 |
loadNext | 기능 | 정의되면이 기능은 사용자가 플랫 목록을 바닥에 스크롤 할 때 호출됩니다. Usecase는 API의 다음 페이지 매김을 호출하는 것입니다. 정의되면 목록 하단에로드 아이콘이 표시됩니다. 로딩 아이콘을 숨기려면이 소품이 정의되지 않은지 확인하십시오. | 한정되지 않은 | 선택 과목 |
refreshControlProps | 물체 | 새로 고침을위한 소품 | 한정되지 않은 | 선택 과목 |
구성 요소에 대한 ref 있는 경우
const completeFlatList = useRef();
...
<CompleteFlatList
...
ref={completeFlatList}
...
/>
또는 구성 요소 기반
<CompleteFlatList
...
ref={c => this.completeFlatList = c}
...
/>
아래에서 모든 방법을 사용할 수 있습니다 : completeFlatList.current.methodName()
또는 구성 요소 기반
this.completeFlatList.methodName()
| 방법 | 설명 |
|---|---|
| ClearSearch | 검색 입력을 프로그래밍 방식으로 명확하게합니다 |
