偏差値20くらいのブログ

はるみちゃんのブログだよ。えへへ。

ReactNative Flexboxまとめ(殴り書き)

React-Nativeを使ったアプリケーション開発にはFlexboxの理解が不可欠。
だから適当にまとめる。

flex

flex:1

これで画面いっぱいにコンポーネントが表示される。
同じレベルにflex:1を指定しているコンポーネントが2個あったとしたら1:1の割合で表示される。
片方が1で片方が2なら1:2の割合。

flexDirection

flexDirection:‘row’
flexDirection:‘column’

縦並び(=column)か横並び(=row)か。デフォルトはcolumn。
あと、ReactNativeではcolumn-reverseとかrow-reverseは効かんっぽいなあ。

flexWrap

flexWrap:‘nowrap’
flexWrap:‘wrap’

nowrapで単一行、wrapで複数行。デフォルトはnowrap。
nowrapの時は要素がはみ出ても横一行or縦一行で表示しようとする。
wrapの時は折り返す。

justifyContent

justifyContent: ‘flex-start’
justifyContent: ‘flex-end’
justifyContent: ‘center’
justifyContent: ‘space-between’
justifyContent: ‘space-around’

コンポーネントの配置方法を指定。

flex-start
縦並びの場合は上から、横並びの場合は左から子コンポーネントを配置する。 (デフォルト)

flex-end
縦並びの場合は下から、横並びの場合は右から子コンポーネントを配置する。

・center
中央に子コンポーネントを配置する

・space-between
一番左と一番右(or一番上と一番下)に子コンポーネントを配置して、
残りの子コンポーネントを均一のスペースが空くように配置する。

・space-around
space-betweenと同様均一のスペースを空けて子コンポーネントを配置する。
ただし、一番左と一番右(or一番上と一番下)のコンポーネントにも隙間が出来る。

alignItems

alignItems: ‘stretch’
alignItems: ‘flex-start’
alignItems: ‘flex-end’
alignItems: ‘center’

縦並びなら「左」、横並びなら「上」を基準に子コンポーネントを揃える。
(justifyContentとは軸が逆)

・stretch(デフォルト)
コンポーネントを表示範囲に伸ばして配置する。

flex-start
縦並びなら左、横並びなら上に子コンポーネントを揃える

flex-end
縦並びなら右、横並びなら下に子コンポーネントを揃える

・center
中央に子コンポーネントを揃える。

alignSelf

コンポーネントで指定した「alignItems」を子コンポーネントで上書きする。
指定できる値はalignItemsと同じ。

flexを使用せず画面一杯に表示

import Dimensions from ‘Dimensions’;
const x = Dimensions.get(‘window’).width;
const y = Dimensions.get(‘window’).height;

こんな感じで画面サイズが取れる。