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;
こんな感じで画面サイズが取れる。