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

<시간/>

섹션의 목록을 렌더링하는 데 도움이 되는 인터페이스입니다. SectionList의 중요한 기능 중 일부는 -

목록에 대한 머리글/바닥글 지원
섹션에 대한 머리글/바닥글 지원
스크롤 로드
당겨서 새로고침
완전한 크로스 플랫폼

기본 SectionList 구성 요소는 다음과 같습니다 -

<SectionList sections={DataContainer} keyExtractor={yourkeyextractor} renderItem={yourenderItem} renderSectionHeader={yoursectionheader} />

SectionList로 작업하려면 아래와 같이 구성 요소를 가져옵니다. -

import { SectionList } from "react-native";

다음은 SectionList에서 사용할 수 있는 중요한 속성 목록입니다. -

소품	설명
렌더 항목	섹션의 항목을 렌더링하는 기본 함수입니다. 반응 요소를 반환합니다. 렌더 함수는 다음 키가 있는 객체처럼 섹션 목록에 전달됩니다. '항목'(객체) - 항목 객체 'index'(숫자) - 섹션 내의 항목에 지정된 인덱스입니다. '섹션'(객체) - 섹션 객체. '구분자'(객체) - 키 뒤에 오는 객체입니다 - 하이라이트'(함수) - () => 무효 '강조 해제'(함수) - () => 무효 'updateProps'(함수) - (select, newProps) => 무효 'select'(열거형) - 값은 '선행', '후행'입니다. 'newProps'(객체)
섹션	렌더링할 데이터입니다.
섹션 헤더를 렌더링	콘텐츠가 맨 위에 렌더링됩니다. iOS에서는 콘텐츠가 맨 위에 도킹되는 것을 볼 수 있습니다.
섹션 바닥글 렌더링	콘텐츠가 맨 아래에 렌더링됩니다.
새로고침	새 데이터를 렌더링해야 하는 경우 새로 고침 시 이 속성을 true로 설정합니다.
빈 컴포넌트 목록	목록이 비어 있을 때 호출되는 구성 요소 클래스, 렌더 함수 또는 렌더 요소입니다. 목록이 비어 있을 때 작업을 수행하려는 경우 이 구성 요소가 도움이 될 것입니다.
목록바닥글 구성요소	모든 항목의 맨 아래에 렌더링될 구성 요소 클래스, 렌더링 기능 또는 렌더 요소.
목록바닥글 구성요소 스타일	바닥글 구성 요소에 필요한 스타일 지정은 여기에서 수행할 수 있습니다.
목록 헤더 구성 요소	모든 항목의 맨 위에 렌더링될 구성 요소 클래스, 렌더링 기능 또는 렌더 요소.
목록 헤더 구성 요소 스타일	헤더 구성 요소에 필요한 스타일 지정은 여기에서 수행할 수 있습니다.
키 추출기	주어진 인덱스에 대한 고유 키를 추출합니다. 이 키는 캐싱에 사용되며 항목 재정렬을 추적하는 데도 사용됩니다.

예시 1:SectionList를 사용하여 데이터 표시

SectionList로 작업하려면 먼저 아래와 같이 가져와야 합니다. -

import { SectionList , Text, View, StyleSheet} from "react-native";

가져오기가 완료되면 SectionList에 표시할 데이터가 필요합니다. 데이터는 아래와 같이 this.state.data 안에 저장됩니다 -

this.state = {
   data: [
      {
         title: "Javascript Frameworks",
         data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
      },
      {
         title: "PHP Frameworks",
         data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
      }
   ]
};

renderItem에 대한 기능 구현

아래 함수는 항목을 처리하고 아래와 같이 Text 구성 요소에 동일한 항목을 표시합니다. -

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};

Text 구성 요소는 항목을 표시하고 View 구성 요소 내부에 래핑됩니다.

SectionList를 구현하려면

다음은 데이터, renderItem, keyExtractor 및 renderSectionHeader 소품이 있는 SectionList 구현입니다.

<View style={styles.container}>
   <SectionList
      sections={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index}
      renderSectionHeader={({ section: { title } }) => (
         <Text style={styles.header}>{title}</Text>
      )}
   />
</View>

this.state.data 데이터에 부여됩니다. 소품 및 this.renderItem 기능이 renderItem에 할당됨 소품.

데이터를 기반으로 데이터 배열에서 고유한 키 속성을 지정할 수 있으며 동일한 속성이 keyExtractor 소품에 제공되어야 합니다. .지정하지 않으면 배열 인덱스를 키로 간주합니다. 가치.

따라서 여기서 고유 키는 item+index이고 동일한 키가 keyExtractor에 할당됩니다.

keyExtractor={(item, index) => item + index}

renderSectionHeader props는 헤더 표시를 처리합니다.

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
      data: [
         {
            title: "Javascript Frameworks",
            data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
         },
         {
            title: "PHP Frameworks",
            data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
         }
      ]
   };
}
renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};
render() {
   return (
      <View style={styles.container}>
         <SectionList
            sections={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index}
            renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

출력

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

예시 2

SectionList에서stickySectionHeadersEnabled 소품 활성화

propsstickySectionHeadersEnabled를 사용하면 sectionList의 헤더를 맨 위에 고정할 수 있습니다. 사용자가 스크롤하면 다음 헤더가 표시되고 맨 위에 도달하면 맨 위에 고정되고 모든 헤더에 대해 동일하게 계속됩니다.

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            {
               title: "Javascript Frameworks",
               data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
            },
            {
               title: "PHP Frameworks",
               data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
            },
            {
               title: "Apache Frameworks",
               data: ["Apache Flex", "Apache Crunch", "Apache CouchDB", "Apache Crail"]
            }
         ]
      };
   }
   renderItem = ({ item }) => {
      return (
         <View style={styles.item}>
            <Text >
               {item}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <SectionList
               stickySectionHeadersEnabled={true}
               sections={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={(item, index) => index}
               renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

출력

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