React NativeのFlatListでグリッド状に画像を配置する方法

背景

React Nativeでインスタグラムみたいにグリッド状に画像を配置したい

実装

画像はunsplashから取得しています。
FlatListのデータは、中身のないただのリストにしてますが、実際はAPIから取得してきたデータなどになると思います。

App.js

import React from 'react';
import { Text, View, StyleSheet, Image, FlatList, Dimensions } from 'react-native';
import Constants from 'expo-constants';

const ITEM_WIDTH = Dimensions.get('window').width;

export default class App extends React.Component {
  state = {
    list: [0,1,2,3,4,5,6,7,8,9]
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
        data={this.state.list}
        keyExtractor={(item, index) => index.toString()}
        numColumns={3}

        renderItem={({item}) => (
          <View>
           <Image
            source={{ uri: 'https://source.unsplash.com/random' }}
            style={styles.imageStyle}
            />
          </View>
        )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  imageStyle: {
    width: ITEM_WIDTH / 3,
    height: ITEM_WIDTH / 3,
    margin: 1,
    resizeMode: 'cover',
  }
});

Expo Snackにこのコードを貼り付けたら動作します。

解説

ウィンドウの横幅を取得

const ITEM_WIDTH = Dimensions.get('window').width;

Imageにカラム数で割ったwidthとheightを設定。

 imageStyle: {
    width: ITEM_WIDTH / 3,
    height: ITEM_WIDTH / 3,
    margin: 1,
  }

FlatListにカラム数として、numColumnsを設定する。

        <FlatList 
        data={this.state.list}
        keyExtractor={(item, index) => index.toString()}
        numColumns={3}
        ...

終わりに

React Native勉強し始めて一週間ぐらいなんですが、Reactでスマホのアプリ作れるのはすごい。。
ってかAndroid Studioのシミュレーター重すぎぃ