11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-27

#背景
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のシミュレーター重すぎぃ

11
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?