FlatList는 목록 항목을 로드하는 데 사용할 수 있는 컨테이너입니다. 머리글 및 바닥글 지원, 다중 열 지원, 수직/수평 스크롤, 지연 로딩 등을 제공합니다.
다음은 FlatList의 몇 가지 중요한 기능입니다 -
- 스크롤 로딩과 함께 제공
- ScrolltoIndex 지원을 사용하여 스크롤 조정 가능
- 머리글 및 바닥글 지원 제공
- 다중 열 지원
- 크로스 플랫폼
- 구성 가능한 조회가능성 콜백
FlatList의 기본 구조는 다음과 같습니다 -
<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} /> FlatList는 모바일 화면의 현재 보기 포트에 맞는 제한된 수의 항목 표시를 처리하는 VirtualizedList 구성 요소에서 구현됩니다. 나머지 데이터는 사용자가 스크롤할 때 렌더링됩니다. data 및 renderItem과 같은 기본 소품을 사용하여 FlatList를 만들 수 있습니다.
FlatList로 작업하려면 다음과 같이 react-native에서 가져와야 합니다. -
import { FlatList} from "react-native"; FlatList의 중요한 속성 중 일부는 다음과 같습니다 -
| 소품 | 설명 |
|---|---|
| 데이터 | 표시할 데이터가 있는 배열입니다. |
| renderItem | renderItem({ 항목, 색인, 구분 기호 });
separators.highlight(), separators.unhighlight(), separators.updateProps(). |
| ListEmptyComponent | 목록이 비어 있을 때 호출되는 구성 요소 클래스, 렌더링 기능 또는 렌더링 요소입니다. 목록이 비어 있을 때 무언가를 하려는 경우 이 구성 요소가 도움이 될 것입니다. |
| ListFooterComponent | 모든 항목의 맨 아래에 렌더링될 구성 요소 클래스, 렌더링 기능 또는 렌더링 요소. |
| ListFooterComponentStyle | 바닥글 구성 요소에 필요한스타일링은 여기에서 수행할 수 있습니다. |
| ListHeaderComponent | 모든 항목의 맨 위에 렌더링될 구성 요소 클래스, 렌더링 기능 또는 렌더링 요소. |
| ListHeaderComponentStyle | 헤더 구성 요소에 필요한 스타일 지정은 여기에서 수행할 수 있습니다. |
| 가로 | 이 속성을 true로 설정하면 항목을 가로로 렌더링합니다. |
| 키 추출기 | 주어진 인덱스에 대한 고유 키를 추출합니다. 이 키는 캐싱에 사용되며 항목 재정렬을 추적하는 데도 사용됩니다.(item:object, index:number) => string; |
예제 1:FlatList의 항목을 세로로 표시
예제는 FlatList의 작동을 보여줍니다. FlatList로 작업하려면 먼저 구성 요소를 가져옵니다 -
import { FlatList , Text, View, StyleSheet } from "react-native"; FlatList와 Text, View, StyleSheet 등과 같은 다른 구성 요소가 필요합니다. 위와 같이 가져옵니다.
가져오기가 완료되면 FlatList에 표시할 데이터가 필요합니다. 데이터는 아래와 같이 this.state.data 안에 저장됩니다 -
this.state = {
data: [
{ name: "Javascript Frameworks", isTitle: true },
{ name: "Angular", isTitle: false },
{ name: "ReactJS", isTitle: false },
{ name: "VueJS", isTitle: false },
{ name: "ReactNative", isTitle: false },
{ name: "PHP Frameworks", isTitle: true },
{ name: "Laravel", isTitle: false },
{ name: "CodeIgniter", isTitle: false },
{ name: "CakePHP", isTitle: false },
{ name: "Symfony", isTitle: false }
],
stickyHeaderIndices: []
}; renderItem에 대한 기능을 구현하려면
아래 함수는 항목을 처리하고 아래와 같이 Text 구성 요소에 동일한 항목을 표시합니다. -
renderItem = ({ item }) => {
return (
<View style={styles.item}>
<Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
</View>
);
}; Text 구성 요소는 View 구성 요소 내부에 래핑됩니다. item.isTitle은 변수가 true/false인지 확인하고 그에 따라 굵게 표시되고 색상이 지정됩니다.
FlatList를 구현하려면
다음은 데이터 및 renderItem props가 있는 FlatList 구현입니다.
<View style={styles.container}>
<FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View> this.state.data 데이터에 부여됩니다. 소품 및 this.renderItem 기능이 renderItem에 할당됨 소품.
데이터를 기반으로 데이터 배열에서 고유한 속성이 될 키 속성을 알릴 수 있으며 동일한 속성이 props keyExtractor에 지정되어야 합니다. 지정하지 않으면 배열 인덱스를 key<로 간주합니다. /엠> 가치.
그래서 우리는 그 이름을 고유한 키로 간주했고 동일한 것이 keyExtractor에 할당되었습니다.
keyExtractor={item => item.name} 다음은 FlatList를 구현하는 전체 코드입니다.
import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: "Javascript Frameworks", isTitle: true },
{ name: "Angular", isTitle: false },
{ name: "ReactJS", isTitle: false },
{ name: "VueJS", isTitle: false },
{ name: "ReactNative", isTitle: false },
{ name: "PHP Frameworks", isTitle: true },
{ name: "Laravel", isTitle: false },
{ name: "CodeIgniter", isTitle: false },
{ name: "CakePHP", isTitle: false },
{ name: "Symfony", isTitle: false }
],
stickyHeaderIndices: []
};
}
renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
return (<View style={styles.container}><FlatList data={this.state.data} renderItem= {this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
margin: 10,
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
}
}); 출력
예시 2:FlatList의 항목을 가로로 표시
FlatList 항목을 가로로 표시하려면 FlatList 구성 요소에 props horizontal={true} 를 추가하기만 하면 됩니다.
import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: "Javascript Frameworks", isTitle: true },
{ name: "Angular", isTitle: false },
{ name: "ReactJS", isTitle: false },
{ name: "VueJS", isTitle: false },
{ name: "ReactNative", isTitle: false },
{ name: "PHP Frameworks", isTitle: true },
{ name: "Laravel", isTitle: false },
{ name: "CodeIgniter", isTitle: false },
{ name: "CakePHP", isTitle: false },
{ name: "Symfony", isTitle: false }
],
stickyHeaderIndices: []
};
}
renderItem = ({ item }) => {return (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
return (<View style={styles.container}><FlatList horizontal={true} data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 100,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
height:100,
backgroundColor: '#d2f7f1'
}
}); 출력
