React Native - List View

FlatList

<FlatList>는 시간이 지남에 따라 항목 수가 변경될 수 있는 긴 데이터 목록에 적합하다. ScrollView와는 달리 현재 화면에 표시된 요소만 렌더링 하며 모든 요소를 한 번에 렌더링 하는 것은 아니다.

FlatList를 사용하기 위해서는 data와 renderItem이 필요하다. data는 rendering 할 요소들이며, data를 불러와 renderItem에 하나씩 전달한다. renderItem은 전달받은 data를 하나씩 render 한다.
다음은 FlatList를 구현한 코드이다.

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

export default FlatListBasics;

 

출력 화면