【React Native】画像や図形の自動レイアウト（FlexBox）

「画面サイズに合わせて画像や図形を調整したい」

HTMLではFlexBoxを使うことで、画像や図形、領域をアイテム数に合わせて適当なサイズに自動調整することができます。

React Nativeでも同様にFlexBoxを指定することができます。

今回は、本家React Nativeのドキュメントとサンプルコードを参考にしながら、FlexBoxを紹介していきます。

reactnative.dev

 

1 User

2462 Pockets

Layout with Flexbox · React Native

https://reactnative.dev/docs/flexbox

A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

また実装の紹介にはExpoを利用しています。

FlexBoxとは？

FlexBoxとは、画面に表示するアイテム数に応じて、各々のサイズや間隔を自動で調整できる機能です。

実際にはFlexBoxを使わずとも、他のstyleパラメータを組み合わせて同様なレイアウトにすることができます。

しかし、他のstyleパラメータを組み合わせた場合は、その組み合わせが複雑になることが多く、見通しが悪くなります。

このカオスなコードは誰が書いたんだー・・・自分でした。。。

ってなことが発生してしまいます。

FlexBoxを使うことで、このような複雑な組み合わせを簡単に実現できます。

簡単な例にはなってしまいますが、例えば、次のような同サイズのボックスを左上に順に表示したり、等間隔に並べたりできます。

FlexBoxの設定の仕方

通常Webの実装では、HTMLの要素にCSSのデザインを当てはめて、Webページを作成していきます。

React NativeではCSSは存在しませんが、同様にstyleを指定してあげることで、画面の整形や装飾をしていきます。

例えば、次のように記述します。

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const Screen = () => {
  return (<script type="prism-html-markup">
    <View style={ [styles.container, {width: 100%}] }></View></script>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'green',
    height: '100%',
  },
});

export default Screen;

タグの中のoptionとしてstyleを直接指定したり、別途定義したStyleSheetを利用してレイアウトを決定していきます。

この例だと、「backgroundColor: 'green'」を指定したcontainerをstyleに当てているので、画面全体が緑色になります。

FlexBoxで指定できるstyleパラメータは？

詳細は後述しますが、まずは簡単にまとめました。

実際には、動作を確認しながらでないとわかりづらいところもあり、ここではこんなsytle指定ができるんだということを、なんとなく把握してもらえれば良いと思います。

また、要素とは、<View>や<Text>のような１つのタグを意味していると思ってもらえればOKです。

親・子要素の関係は次の場合、

<View>
  <Text> Children1 </Text>
  <Text> Children2 </Text>
</View>

Viewが親で、２つのTextがそれぞれ子要素となります。

flexBasis, flexGrow, flexShrinkもありますが、あまり使われないStyleなので割愛します。

flex

flexは、flexDirectionで指定した軸方向に対しての要素サイズの比率を決定します。

例えば次の例だと、赤・オレンジ・緑の領域で画面が満たされます。

ここでは、赤にはflex:1、オレンジにはflex:2、緑にはflex:3を割り当てています。

そのため、全体は6（=1+2+3）となり、それぞれの割合は赤：1/6、オレンジ：2/6、緑：3/6となります。

flexDirection

flexDirectionは、要素を整列させる軸を決定します。

direction

directionは、子要素をどの方向（左→右 or 右→左）に並べるのかを決定します。

justifyContent

justifyContentは、flexDirectionで選択した軸に対して、どのように要素を並べるのかを決定します。

先頭に寄せるのか、後尾に寄せるのか、中央に寄せるのか、等間隔で並べるのかなどを指定できます。

alignItems

alignItemsは、flexDirectionと垂直となる軸に対して、どのように要素を配置するかを指定します。

今回の実装例だと、ボックスのサイズが指定されているものもあるので、stretchを選択しても一部のみサイズが変化します。

alignSelf

alignSelfは、alignItemsと同様なOptionを選択できます。

alignItemsと異なる点としては、ひとつひとつの子要素に対してstyleを指定することができます。

また、alignItemsで指定されてたstyleは、alignSelfで上書きされます。

基本的なレイアウトはalignItemsで指定しておきながら、例外となるところだけalignSelfで位置を変えるという時に便利ですね。

alignContent

alignContentは、flexDirectionの垂直軸に対して、どのように並べるのかを決定します。

これは、justifyContentの垂直バージョンのstyleで、同様なOptionを選択できます。

複数行・列で効果を発揮するので、次で紹介するflexWrapがwrapである必要があります。

flexWrap

flexWrapは、子要素が親要素からはみ出た時に折り返すのかを決定します。

width, height

width, heightは、要素の幅や高さを決定します。

通常CSSにおいて「width/height」や次に出てくる「position」はFlexBoxには入らないと思っていましたが、React NativeのFlexBox説明ページには記載されていたので、こちらも掲載しておきます。

サイズの指定の仕方は、auto、pixels、percentの３つになります。

position

positionは、要素の位置を指定するために基準位置を決定します。

要素の位置は、top、bottom、left、rightで決定されますが、その基準となる位置です。

番外編：baselineとは？

alignItemsでは、baselineというoptionがありました。

baselineとは、テキストを綺麗に整列させるための基準ラインのことを指します。

中学生でアルファベットを学習した時、行の上下のラインを含めて１行に４つのラインのあるノートを利用して、書き方を習ったと思います。

基本的には、下から２本目のラインにアルファベットの下部を合わせて記述していきます。

このラインのことをbaselineといいます。

alignItemsの実装例を、flexDirection: rowに指定し、さらに、それぞれの要素に異なるサイズの文字を載せると、その違いがわかりやすくなります。

下記の実装例で、「baseline」を選択してもらうと、実際にbaselineを基準に子要素が整列されるのがわかるかと思います。

まとめ：FlexBoxは便利

FlexBoxについて解説していきました。

できることが多くて、少し慣れも必要ですが、画面を綺麗に見せるために強力な機能です。

もう少し詳しく知りたい方は本家のページをご覧ください。

reactnative.dev

 

1 User

2462 Pockets

Layout with Flexbox · React Native

https://reactnative.dev/docs/flexbox

A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

また、上の実装例は、その場でコードを書き換えることもできるので、色々書き換えてみて遊んでみて下さい。