React Native0.61 사용 목록

1378 단어 ReactNative
React Native는 긴 목록 데이터를 보여주기 위한 몇 가지 구성 요소를 제공합니다. 일반적으로 FlatList나 SectionList를 대체합니다.FlatList 구성 요소는 수직 스크롤 목록을 표시하는데 그 중의 요소 간의 구조는 비슷하지만 데이터만 다르다.FlatListScrollView와는 달리 FlatList는 모든 요소를 즉시 렌더링하지 않고 화면에 보이는 요소를 우선적으로 렌더링합니다.FlatList 구성 요소에 필요한 두 가지 속성은 datarenderItem입니다.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의 네트워크 관련 사용법을 배워야 할 수도 있습니다.

좋은 웹페이지 즐겨찾기