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

# Flatlistとは
>[FlatList](https://reactnative.dev/docs/flatlist)
A performant interface for rendering basic, flat lists

要はリストを作りたいときに便利なCore Componentsです。

今回は、以下のように、nameとageを一覧で表示したい(スタイルは適当)とします。

<img width="319" alt="スクリーンショット 2020-05-29 15.27.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/a8271469-cbb1-3b2b-bad0-dfbcd6d3a374.png">

# Flatlistを使わずに実装

比較用として実装します。

```jsx
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を使って実装する


```jsx
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)``の結果は以下のようになっている
<img width="185" alt="スクリーンショット 2020-05-29 15.39.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/268021a9-8143-3e5a-d72f-b5c64276a3e4.png">


このようにFlatListを使うと、foreach等の処理せずとも、自動で配列内の各オブジェクトに対して処理をしてくれます。
リストを作成するときにはぜひ使ってみてください。

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

らしいので、``FlatList``を``ScrollView``で囲まないように注意！！