ReactNativeのtutorialの内容を図解で理解するためのメモ。
https://facebook.github.io/react-native/docs/flexbox.html
flexDirextion
ポイント
- 内包するコンポーネントが並ぶ方向
- プライマリ軸(primary axis)
イメージとしては下記の図を参照。
justifyContent
ポイント
- primary axisにおけるレイアウト
- 内包コンポーネント間のレイアウトを定義する
space-around
やspace-between
を指定できる
alignItems
ポイント
- secondary axisにおけるレイアウト
- 内包するコンポーネント群の列(または行)をどの位置に配置するかを指定する
サンプル
sample.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class AlignItemsBasics extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};
設定まとめ
表にまとめると下記のようなレイアウト
プロパティ | 値 | 説明 |
---|---|---|
flexDirection | column | primary axisは縦方向。内包コンポーネントが縦に並ぶ。 |
justifyContent | space-around | 内包コンポーネントの周囲のスペースを均一にする。 |
alignItems | center | 横方向において中央揃え |