expoで要素を中央配置する４つの方法
abyblog
expoで要素を中央配置する方法をまとめておきたいと思ったので、備忘録的にまとめておきます。
目次（クリックで読みたい部分にジャンプできます）
expoで使える中央配置4つ
expoで中央配置する方法は、私の調べた中で次の４つがあります。
中央配置するプロパティ
textAlign
justifyContent
alignItems
alignContent
これらのどれかを使うことで、中央配置をすることができます。
次に、それぞれどのような使い方ができるかを解説します。
textAlign
「テキストを中央配置する」のに用います。
<Text style={{ textAlign: 'center' }}>中央揃えのテキスト</Text><Text>のように、囲んでいる子要素のテキストに対して適用できます。
ただ、子要素のViewコンポーネントなどには適用できません。
あくまで、<Text>コンポーネントのみに適用できるものだと思ってください。
justifyContent
水平方向の配置に作用します。
後ほど紹介するalignItems も、水平方向を操作するものと同じですが、
スタンダードに使うのは、justifyContentが良いでしょう。
<View style={{ justifyContent: "center" }}>
{/* 子要素 */}
</View>子要素の中に、<View>コンポーネントなどを入れ子構造などにしても、全てに作用することができます。
水平方向に配置したいと思ったら、justifyContentを使うと覚えておくことにします。
alignItem
垂直方向の配置に作用します。
垂直方向で、中央配置するのに用います。
<View style={{ alignItem: "center" }}>
{/* 子要素 */}
</View>alignContent
justifyContentと同じで、水平方向に作用します。
違いは、alignContentは、「子要素の配置の間隔」を調整するものです。
正直自分もよく分かってはいませんが、
justifyContentは要素自体、alignContentは要素の間隔を。と理解しています。
重宝するのは、justifyContentでは中央配置ができない時です。
justifyContentを指定しても、子要素がどうしても動かない時があります。
その時に、alignItemsを使えばいいんだ！と覚えておけば良いです。
<View style={{ alignContent: 'center' }}>
{/* 子要素 */}
</View>まとめ
今回は、expoで要素を中央配置するための方法４選を紹介しました。
中央配置をする機会は本当に多いので、この備忘録を見直していこうと思います。
では。
