【ReactNative】リスト作成にはFlatListが便利

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

1列目を構成する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で囲まないように注意！！