React Native基礎

コンポーネントのレイアウト

React NativeではCSSのFlexboxを使用して子要素のレイアウト（配置）方法を指定します。つまり、styleプロパティで指定するスタイルの一部として子要素のレイアウト方法を指定します。
※設定できるFlexboxのプロパティはほぼCSSと同じですが一部異なるものがあります。例えばflexプロパティはCSSと意味が異なります。

flexDirectionプロパティ

Flexboxの基本となるのは子要素を縦方向（行：column）に配置するのか、横方向（列：row）に配置するのかです。この指定にはflexDirectionプロパティを使用します。flexDirectionで指定された方向を主軸（main axis）、主軸と垂直になる軸を交差軸（cross axis）と言います。子要素を縦方向に配置する場合は主軸は行で交差軸は列、横方向に配置する場合は主軸は列で交差軸は行になります。flexDirectionのデフォルト値はcolumnになります。

主軸はjustifyContentプロパティ、交差軸はalignItemsプロパティで指定します。
主軸はflexDirectionプロパティで指定される点に注意してください。つまり、justifyContentプロパティは常に上下方向の指定というわけではなく、flexDirectionがcolumnの場合はjustifyContentで上下方向の配置を設定するということになります。

justifyContentプロパティ

justifyContentプロパティで指定できるのは次の6種類です。なお、子要素を配置させるためにはコンテナ自体にwidthやheightなどで大きさが設定されている必要があります（コンテナ自体に大きさがないと中央寄せとしても結局「詰まった」レイアウトになります）

flex-start：主軸の開始位置（flexDirectionがcolumnであれば上）に配置する（デフォルト値）
flex-end：主軸の終了位置（flexDirectionがcolumnであれば下）に配置する。
center：主軸の中央に配置する。
space-between：子要素の間にスペースを空けて配置する。
space-around：子要素の周りにスペースを空ける。space-betweenと異なり先頭と末尾にもスペースが空けられる。
space-evenly：空けられるスペースが同じ大きさになる。

alignItemsプロパティ

alignItemsプロパティで指定できるのは次の5種類です。

stretch：子要素を交差軸一杯まで広げる（デフォルト値）
flex-start：交差軸の開始位置（flexDirectionがcolumnであれば左）に配置する。
flex-end：交差軸の終了位置（flexDirectionがcolumnであれば右）に配置する。
center：交差軸の中央に配置する。
baseline：ベースラインを揃える（flexDirectionがrowの場合のみ意味がある）

以下が各設定値の例です。わかりやすいようにText要素に背景色を設定しています。

flexWrapプロパティ

主軸方向に子要素を配置する際、「はみ出る」要素をどうするかを指定するのがflexWrapプロパティです。デフォルト値はnowrap（はみ出てもそのまま）です。wrapを指定することにより折り返しが行われます。