Flatlist란?

FlatList
A performant interface for rendering basic, flat lists

요점은 목록을 만들고 싶을 때 유용한 Core Components입니다.

이번에는 다음과 같이 name과 age를 목록으로 표시하고 싶습니다 (스타일은 적당).

Flatlist 없이 구현

비교용으로 구현합니다.

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Divider } from 'react-native-elements';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

interface Person {
    name: string
    age: number
}

const Test: React.FC = () => {

    const personList: Person[] = [
        {
            name: '一郎',
            age: 11
        },
        {
            name: '二郎',
            age: 22
        },
        {
            name: '三郎',
            age: 33
        },
    ]

    const renderPerson = (person: Person) => {  // 2
        return(
            <View style={styles.container}>
                <View style={styles.item}>
                    <Text>{person.name}</Text>
                    <Text>{person.age}</Text>
                </View>
                <Divider />
            </View>
        )
    }

    const renderList: Array<JSX.Element> = []

    personList.forEach((person) => {  // 1
        renderList.push(renderPerson(person))  // 3
    })

    return(
        <View>
            {renderList}
        </View>
    )

}

export default Test;
...

1

{ name: '一郎', age: 11} 를 renderPerson 함수의 인수로 하여 발화

2

첫 번째 열을 구성하는 jsx 반환

3

그 jsx를, 최종적으로 렌더링 되는 renderList 에 격납한다

이것도 괜찮습니다만, 조금 가독성에 걸치고, jsx를 배열에 격납해 가는 것도 왠지 조금 기분 나쁘습니다(주관).

Flatlist를 사용하여 구현

import React from 'react';
import { StyleSheet, View, Text, FlatList } from 'react-native';
import { Divider } from 'react-native-elements';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

interface Person {
    name: string
    age: number
}

const Test: React.FC = () => {

    const personList: Person[] = [
        {
            name: '一郎',
            age: 11
        },
        {
            name: '二郎',
            age: 22
        },
        {
            name: '三郎',
            age: 33
        },
    ]

　　 // 2
    const renderPerson = ({item}: {item: Person}) => {

        console.log(item)

        return(
            <View style={styles.container}>
                <View style={styles.item}>
                    <Text>{item.name}</Text>
                    <Text>{item.age}</Text>
                </View>
                <Divider />
            </View>
        )
    }

    // const renderList: Array<JSX.Element> = []

    // personList.forEach((person) => {
    //     renderList.push(renderPerson(person))
    // })

    return(
        <View>
            {/* 1 */} 
            <FlatList data={personList} renderItem={renderPerson}/>  
        </View>
    )

}

export default Test;

const styles = StyleSheet.create({
    container: {
        marginTop: wp('7%')
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: wp('2%'),
        marginBottom: wp('2%')
    }
})

1

data 에 객체가 할당된 배열, renderItem 에 jsx를 반환하는 함수를 할당

2

{item} (다른 명명은 불가)을 인수로 해, jsx내에서 전개한다.console.log(item)의 결과는 다음과 같습니다.


이와 같이 FlatList를 사용하면, foreach등의 처리하지 않아도, 자동적으로 배열내의 각 오브젝트에 대해서 처리를 해 줍니다.
리스트를 작성할 때는 꼭 사용해 보세요.

Inherits ScrollView Props, unless it is nested in another FlatList of same orientation.

같아서 FlatList 를 ScrollView 로 둘러싸지 않도록 주의! !