Using List Views

FlatList

일반적으로 ListView을 표현을 했을때에는 FlatList or SectionList 을 사용합니다.

먼저 FlatList같은 경우에는 가변적인 대량의 아이템을 표시하는데 효과적입니다.

일반적으로 전부 렌더링 하는 방식이 아니라 보여지는 부분만 렌더링 하기 때문입니다.

 

FlatList는 중요한 props가 몇가지가 있는데 그중 몇개만 설명해 드리도록 하겠습니다.

 

data

FlatList에 List에 대한 아이템 정보입니다.

 

renderItem

실제로 렌더링을 진행을 할때 보여줄 컴포넌트입니다.

 

[예제]

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

export default 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>
    );
}

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

 

SectionList

List에서 Header을 넣고 싶은 경우에는 SectionList을 통해서 사용해도 됩니다.

마치 Android에서는 ListView에 Header View , IOS에서는 UITableView에 Header View와 비슷합니다.

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

export default SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})