React Native0.61 사용 목록
FlatList 구성 요소는 수직 스크롤 목록을 표시하는데 그 중의 요소 간의 구조는 비슷하지만 데이터만 다르다.FlatList와 ScrollView와는 달리 FlatList는 모든 요소를 즉시 렌더링하지 않고 화면에 보이는 요소를 우선적으로 렌더링합니다.FlatList 구성 요소에 필요한 두 가지 속성은 data과 renderItem입니다.data는 목록의 데이터 원본이고 renderItem는 데이터 원본에서 데이터를 하나하나 분석한 다음에 포맷이 설정된 구성 요소를 되돌려 렌더링한다.다음 예는 간단한
FlatList를 만들고 시뮬레이션 데이터를 예약했다.먼저 초기화FlatList에 필요한 data를 초기화하고 그 중의 각 항목(행) 데이터는 renderItem에 렌더링된 Text 구성 요소로 전체FlatList를 구성한다.import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
export default class FlatListBasics extends Component {
render() {
return (
{item.key} }
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})목록의 일반적인 장면 중 하나는 서버에서 목록 데이터를 가져와 표시하는 것입니다. 이 과정을 실현하려면 React Native의 네트워크 관련 사용법을 배워야 할 수도 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
