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