React Native Flexbox

概要：このチュートリアルでは、Flexboxモデルを使用してモバイルアプリのコンポーネントを配置する方法を学びます。

React Nativeは、Flexboxレイアウトアルゴリズムを使用してコンポーネントのレイアウトを作成します。React NativeのFlexboxは、WebのFlexboxと似ていますが、いくつかの小さな違いがあります。

機能	React Native	Web
displayプロパティ	暗黙的に`display: 'flex'`が含まれる	明示的に`display: flex`を指定する必要がある
デフォルトのflex方向	デフォルトはcolumn `flexDirection: 'column'`	デフォルトはrow `flex-direction: row`
flexプロパティ	1つの値を受け入れる `flex: flex-basis`	1～3つの値 `flex: flex-grow flex-shrink flex-basis`

Flexコンテナとアイテム

コンポーネントにdisplay: 'flex'がある場合、それはflexコンテナになります。すべての直接の子がflexアイテムになります。

例:

<View style={{ display: 'flex'}}>
    <Text>JS</Text>
    <Text>React</Text>
    <Text>React Native</Text>
</View>Code language: HTML, XML (xml)

この例では、Viewはflexコンテナであり、Textコンポーネントはflexアイテムです。

flexコンテナの直接の子のみがflexアイテムであり、間接的な子コンポーネントはそうではないことに注意してください。例:

<View style={{ display: 'flex'}}>
    <Pressable>
        <Text>JS</Text>
    </Pressable>
    <Pressable>
        <Text>React</Text>
    </Pressable>
    <Pressable>
        <Text>React Native</Text>
    </Pressable>
</View>Code language: HTML, XML (xml)

この例では、Pressableコンポーネントはflexアイテムですが、TextコンポーネントはViewコンポーネントの間接的な子であるため、flexアイテムではありません。

React Nativeでは、以下のコンポーネントはデフォルトでflexboxレイアウトを使用します。つまり、display: 'flex'を明示的に指定する必要はありません。

Flex Direction (Flexの方向)

Flexレイアウトは、主軸と交差軸の2つの暗黙的な軸を使用します。

flexDirectionが'column'に設定されている場合、主軸は上から下になり、交差軸は左から右になります。

flexDirectionが'row'に設定されている場合、主軸は左から右になり、交差軸は上から下になります。

Flexboxを効果的に使用するには、alignItemsプロパティとflexDirectionプロパティを組み合わせて使用することがよくあります。

alignItems

alignItemsは、flexコンテナの交差軸上で個々のflexアイテムを整列させます。alignItemsプロパティは、以下の値を受け入れます。

stretch (デフォルト)
flex-start
flex-end
center
baseline

stretch

alignItems stretchは、交差軸上のすべてのflexアイテムをストレッチします。alignItemsはデフォルトでstretchになることに注意してください。

flex-start

alignItemsがflex-startに設定されている場合、flexアイテムはflexコンテナの交差軸の開始位置に整列されます。

flex-end

alignItemsがflex-endに設定されている場合、flexアイテムはflexコンテナの交差軸の終了位置に整列されます。

center

alignItems centerは、flexアイテムを交差軸の中央に配置します。

以下のプログラムは、alignItemsを示しています。

baseline

flexDirectionが'row'に設定されている場合、alignItems baselineはflexアイテムを同じベースラインに沿って整列させます。

以下のプログラムは、alignItems baselineを示しています。

justifyContent

justifyContentは、flexアイテムをflexコンテナの主軸に沿ってグループとして（alignItemsのように個々のアイテムではなく）整列させます。

justifyContentは、以下のいずれかの値を受け入れます。

flex-start
flex-end
space-between
space-evenly
space-around
center

以下のアプリは、justifyContentがどのように機能するかを示しています。

flex-start

justifyContent flex-startは、flexアイテムをグループとしてflexコンテナの主軸の開始位置に整列させます。

flex-end

justifyContent flex-endは、flexアイテムをグループとしてflexコンテナの主軸の終了位置に整列させます。

center

justifyContent centerは、flexアイテムをグループとしてflexコンテナの主軸の中央に整列させます。

space-between

justifyContent space-betweenは、flexアイテム間のスペースをflexコンテナの主軸に沿って均等に分散させます。

space-evenly

justifyContent space-evenlyは、flexアイテムをflexコンテナの主軸上で周囲に均等なスペースを空けて配置します。

space-around

justifyContent space-aroundは、flexコンテナの主軸全体にflexアイテムを配置し、残りのスペースをflexアイテムの周囲に分散させます。

以下の表は、space-between、space-around、およびspace-evenlyの違いを示しています。

プロパティ	説明	視覚的なレイアウト（垂直）
`space-between`	flexアイテム間のスペースを分散します。開始位置と終了位置にはスペースがありません。	\| アイテム 1 \| — スペース — \| アイテム 2 \| — スペース — \| アイテム 3 \|
`space-around`	flexアイテムの周りのスペースを分散します。各flexアイテムの前、間、後のスペースが均等です。開始/終了スペースは、flexアイテム間のスペースの半分です。	— 1/2 スペース — \| アイテム 1 \| — スペース — \| アイテム 2 \| — スペース — \| アイテム 3 \| — 1/2 スペース —
`space-evenly`	flexアイテム間のスペースを均等に分散します。開始位置と終了位置を含め、各flexアイテム間のスペースが均等です。	— スペース — \| アイテム 1 \| — スペース — \| アイテム 2 \| — スペース — \| アイテム 3 \| — スペース —

概要

React Nativeは、flexboxレイアウトを使用してコンポーネントを配置します。
alignItemsを使用して、flexコンテナの交差軸上のflexアイテムを整列させます。
flexDirectionを使用して、flexコンテナの主軸上のflexアイテムを整列させます。

このチュートリアルは役に立ちましたか？