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의 몇 가지 중요한 속성입니다. -

Props

Description

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

표시할 데이터가 포함된 배열입니다.
renderItem({ item, index, seperators });
index - 각 항목에는 색인이 있습니다. separator - 소품 렌더링에 도움이 되는 기능입니다. 사용 가능한 함수는 -	separators.highlight(), separators.unhighlight(), separators.updateProps(). ListEmptyComponent 목록이 비어 있을 때 호출되는 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다. 이 구성 요소는 목록이 비어 있을 때 일부 작업을 수행하려는 경우 유용할 수 있습니다.
모든 항목의 하단에 렌더링될 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다.
여기에서 바닥글 구성 요소에 필요한 스타일을 지정할 수 있습니다.
모든 항목 위에 렌더링되는 구성 요소 클래스, 렌더링 함수 또는 렌더링 요소입니다.
헤더 구성 요소에 필요한 스타일링을 여기에서 수행할 수 있습니다.
true로 설정하면 이 속성은 항목을 가로로 렌더링합니다.
특정 인덱스에 대한 고유 키를 추출합니다. 이 키는 캐싱 및 항목 재정렬 추적에 사용됩니다. (항목: 개체, 색인: 번호) => 문자열; strong>
이 예는 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의 항목을 수평으로 표시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 중국어 웹사이트의 기타 관련 기사를 참조하세요!