ReactNativeでCardをGrid表示
こんにちは。てちこまです。
現在制作しているアプリでデザインキットであるreact-native-elementsを利用しているのですがその中のCardでGridListを実装したのでそちらを記事にします。
やりたいこと
こんなの↓
- Card上部にImage、下部にタイトルや説明を配置
- 2列のGrid表示
実装方法
注意:一部省略箇所あります。
まずFlatListのコードがこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//GridList.tsx import SquareCard from '../atoms/SquareCard' const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, }) const GridList: React.FC = () => { return ( <SafeAreaView> <ScrollView> <View style={styles.container}> <FlatList data={testData} keyExtractor={item => `${item.id}`} renderItem={({ item }) => { return <SquareCard/> }} numColumns={2} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} /> </View> </ScrollView> </SafeAreaView> ) } export default GridList |
※testDataには
|
1 2 3 4 |
type TestType = { id: number title: string } |
の配列を利用しています。
ポイントは
- numColumnsで列数を指定
- styleでalignItems:'center'とする
です。
numColumnsは1より大きい数を指定できるプロパティになっておりFlatListの列数を指定出来ます。
またalignItems:'center'で中央揃えに指定することでCardが左寄りとなることを防ぎます。
※指定しない場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//SquareCard.tsx import React from 'react' import { Card as ElementsCard } from 'react-native-elements' import { Dimensions, StyleSheet, View ,Text} from 'react-native' const ITEM_WIDTH = Dimensions.get('window').width const styles = StyleSheet.create({ containerStyle: { width: ITEM_WIDTH / 2.3, height: ITEM_WIDTH / 2.3, margin: 10, borderRadius: 8, padding: 0, }, imageStyle: { flex: 1, borderTopRightRadius: 8, borderTopLeftRadius: 8, overflow: 'hidden', }, imageWrapperStyle: { flex: 1, }, wrapperStyle: { flex: 1, padding: 0, }, viewStyle: { padding: 10, flex: 1, }, }) const SquareCard: React.FC = () => { return ( <ElementsCard containerStyle={styles.containerStyle} image={require('react_native.png')} imageStyle={styles.imageStyle} imageWrapperStyle={styles.imageWrapperStyle} wrapperStyle={styles.wrapperStyle}> <View style={styles.viewStyle}> <Text>aaa</Text> <Text>test</Text> </View> </ElementsCard> ) } export default SquareCard |
次にListに内包するCardですが特に重要なポイントは
const ITEM_WIDTH = Dimensions.get('window').width
です。
端末画面横幅を取得しCardをその半分以下に指定することでどの端末でも同じレイアウトで表示されるようにしています。
またお題に直接関係ありませんが今回Cardの角に丸みを持たせ、Imageの角も同じ分角を丸めました。
この際styleでoverflow:'hidden'を指定しないとImageの角を丸めることが出来ないので気をつけましょう。(ここで詰まった)
まとめ
今回のアプリはAdobe XDでUIを一通り作成して作り始めているのですがデザインキットが使える分本家Androidよりデザイン楽やなーと思いました(小並感)
パフォーマンスはともかくListもネイティブより簡単に実装出来て素晴らしいですね。
ただ、そのままペタペタしてると没個性になってしまうのでなるべくカスタマイズして(XDで作成したデザイン理想図に近づけて)作成していきたいと思います。
アプリのダークテーマなども実装していく予定なのでそちらも完成次第記事にします！
