ReactNativeでCardをGrid表示

こんにちは。てちこまです。

現在制作しているアプリでデザインキットであるreact-native-elementsを利用しているのですがその中のCardでGridListを実装したのでそちらを記事にします。

やりたいこと

こんなの↓

  1. Card上部にImage、下部にタイトルや説明を配置
  2. 2列のGrid表示

実装方法

注意:一部省略箇所あります。

まずFlatListのコードがこちらです。

※testDataには

の配列を利用しています。

ポイントは

  1. numColumnsで列数を指定
  2. styleでalignItems:'center'とする

です。

numColumnsは1より大きい数を指定できるプロパティになっておりFlatListの列数を指定出来ます。

またalignItems:'center'で中央揃えに指定することでCardが左寄りとなることを防ぎます。

※指定しない場合


次にListに内包するCardですが特に重要なポイントは

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

です。

端末画面横幅を取得しCardをその半分以下に指定することでどの端末でも同じレイアウトで表示されるようにしています。


またお題に直接関係ありませんが今回Cardの角に丸みを持たせ、Imageの角も同じ分角を丸めました。

この際styleでoverflow:'hidden'を指定しないとImageの角を丸めることが出来ないので気をつけましょう。(ここで詰まった)

まとめ

今回のアプリはAdobe XDでUIを一通り作成して作り始めているのですがデザインキットが使える分本家Androidよりデザイン楽やなーと思いました(小並感)

パフォーマンスはともかくListもネイティブより簡単に実装出来て素晴らしいですね。

ただ、そのままペタペタしてると没個性になってしまうのでなるべくカスタマイズして(XDで作成したデザイン理想図に近づけて)作成していきたいと思います。

アプリのダークテーマなども実装していく予定なのでそちらも完成次第記事にします!

てちこま

高卒後3年ニート。 起死回生でコン専入学。 資格とったり、アプリ作ったりしてました。 2020から新米WEBエンジニアになりました。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする