【React Native】Viewコンポーネントをグリッド表示する

タイトル通り、React Native の View コンポーネントで作成した要素をグリッド表示させる方法についてです。
なお、今回は横2列で表示させています。
ライブラリもあるようでしたが、自前でも実装できるみたいだったので、参考サイトを元に実装しました。

実装にあたり、参考にさせていただいた記事はこちらから。

React NativeのFlatListでグリッド状に画像を配置する方法 – Qiita
https://qiita.com/harker/items/8ebb17ec568a6393bcb5

サンプルコードはこちら。
まず、必要な各種コンポーネントをインポートします。
また、styles も定義します。

import { ScrollView, FlatList, StyleSheet, Image, View, Text, Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  listContainer: {
    flexGrow: 1,
    justifyContent: 'center'
  },
  card: {
    backgroundColor: '#FFF',
    width: windowWidth / 2 - 15,
    margin: 5,
  },
  image: {
    width: '100%',
    height: 150,
  },
});

そうしたら、render() の return 内に下記を追加します。
なお、state の list に表示させたいデータの配列が格納されています。

<ScrollView>
  <View style={styles.container}>
    <FlatList
      data={this.state.list}
      keyExtractor={item => `${item.id}`}
      renderItem={({item, index}) => {
        return (<View style={styles.card}>
                  <Text>{item.title}</Text>
                  <Image
                    style={styles.image}
                    resizeMode="cover"
                    source={{ uri: item.image }} />
                </View>);
      }}
      numColumns={2}
      contentContainerStyle={styles.listContainer} />
  </View>
</ScrollView>

実装する項目は以上です！
あとはプロジェクトを実行すれば、要素が横2列で表示されます。

以上、React Native で View コンポーネントをグリッド表示する方法についてでした。
ご参考になれば幸いです。