ReactNative Flexboxまとめ（殴り書き）

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

flex:1

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

flexDirection:‘row’
flexDirection:‘column’

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

flexWrap:‘nowrap’
flexWrap:‘wrap’

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

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: ‘stretch’
alignItems: ‘flex-start’
alignItems: ‘flex-end’
alignItems: ‘center’

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

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

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

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

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

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

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

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

JKになりたい