FlatList 구성 요소는 무엇이며 React Native에서 이를 사용하는 방법은 무엇입니까?

FlatList는 목록 항목을 로드하는 데 사용할 수 있는 컨테이너입니다. 머리글 및 바닥글 지원, 다중 열 지원, 수직/수평 스크롤, 지연 로딩 등을 제공합니다. scrolltoindex 지원을 사용하여 스크롤링을 조정할 수있는 스크롤을 조정할 수있는 스크롤을 조정할 수있는 scroll afports header and gultiple columns support

cross -platform

configable visibility callbacks the 기본 구조 of FlatList는 다음과 같습니다. -

• <FlatList
  data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

FlatList는 VirtualizedList 구성 요소를 통해 구현되며, 이는 모바일 화면의 현재 보기 포트에 맞는 제한된 수의 항목을 표시하는 역할을 담당합니다. 나머지 데이터는 사용자가 스크롤할 때 렌더링됩니다. data 및 renderItem과 같은 기본 속성을 사용하여 FlatList를 만들 수 있습니다.
FlatList를 사용하려면 아래와 같이 React-Native에서 가져와야 합니다. -

• import { FlatList} from "react-native";

아래 나열된 것은 FlatList의 몇 가지 중요한 속성입니다. - < li>

Props

Description

DatarenderItemitem - 목록 형식으로 표시되는 데이터 필드의 항목입니다. ListFooterComponentListFooterComponentStyleListHeaderComponentListHeaderComponentStyleHorizontalkeyExtractor예제 1: FlatList의 항목을 수직으로 표시 텍스트, 뷰, 스타일시트 등과 같은 다른 구성 요소와 함께 FlatList가 필요합니다. 위와 같이 가져옵니다. renderItem을 구현하는 함수 < /tr> 다음 함수는 항목을 가져와 아래와 같이 텍스트 구성 요소에 표시하는 역할을 담당합니다. -

표시할 데이터가 포함된 배열입니다. < /th>
renderItem({ item, index, seperators });
index - 각 항목에는 색인이 있습니다. separator - 소품 렌더링에 도움이 되는 기능입니다. 사용 가능한 함수는 -	separators.highlight(), separators.unhighlight(), separators.updateProps(). ListEmptyComponent 목록이 비어 있을 때 호출되는 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다. 이 구성 요소는 목록이 비어 있을 때 일부 작업을 수행하려는 경우 유용할 수 있습니다.
모든 항목의 하단에 렌더링될 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다.
여기에서 바닥글 구성 요소에 필요한 스타일을 지정할 수 있습니다.
모든 항목 위에 렌더링되는 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다.
< /strong>헤더 구성 요소에 필요한 스타일링을 여기에서 수행할 수 있습니다.
true로 설정하면 이 속성은 항목을 가로로 렌더링합니다.
특정 인덱스에 대한 고유 키를 추출합니다. 이 키는 캐싱 및 항목 재정렬 추적에 사용됩니다. (항목: 개체, 색인: 번호) => 문자열;
이 예는 FlatList의 작동 방식을 보여줍니다. FlatList를 사용하려면 먼저 구성 요소를 가져옵니다. import { FlatList , Text, View, StyleSheet } from "react-native";	가져오기가 완료된 후 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 = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

텍스트 구성 요소 뷰 구성 요소 내부에 래핑됩니다. item.isTitle은 변수입니다. true/false를 확인하고 그에 따라 굵게 설정하고 색상을 지정합니다.

FlatList를 구현하려면

여기에 데이터 및 renderItem 속성이 있는 FlatList 구현이 있습니다.

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

this.state.data

에는

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 ({item.name});};
render() {
   return ();
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Output

예제 2: FlatList의 항목을 수평으로 표시< /p>FlatList 항목을 수평으로 표시하려면 FlatList 구성 요소에 수평={true} props를 추가하기만 하면 됩니다.

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 ({item.name});};
   render() {
      return ();
   }
}
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'
   }
});

출력

위 내용은 FlatList 구성 요소는 무엇이며 React Native에서 이를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!