高さおよび幅

コンポーネントの高さおよび幅は、画面上でのサイズを決定します。

固定寸法

コンポーネントの寸法を設定する一般的な方法は、スタイルに固定のwidthとheightを追加することです。React Nativeのすべての寸法は単位なしで、密度に依存しないピクセルを表します。

このように寸法を設定するのは、サイズを常に一定のポイント数に固定し、画面サイズに基づいて計算しないコンポーネントによく使用されます。

注意

ポイントと物理的な測定単位の間には、普遍的なマッピングはありません。つまり、固定寸法のコンポーネントは、異なるデバイスや画面サイズで同じ物理的なサイズにならない可能性があります。ただし、ほとんどのユースケースでは、この違いは目立ちません。

フレキシブル寸法

コンポーネントのスタイルでflexを使用すると、利用可能なスペースに基づいてコンポーネントを動的に拡大および縮小できます。通常はflex: 1を使用します。これは、コンポーネントに同じ親を持つ他のコンポーネント間で均等に共有される利用可能なすべてのスペースを埋めるように指示します。指定されたflexが大きいほど、コンポーネントが兄弟コンポーネントと比較して占めるスペースの比率が高くなります。

情報

コンポーネントは、親が0より大きい寸法を持っている場合にのみ、利用可能なスペースを埋めるように拡大できます。親が固定のwidthとheight、またはflexのいずれも持っていない場合、親の寸法は0になり、flexの子は表示されません。

コンポーネントのサイズを制御できるようになったら、次のステップは画面にレイアウトする方法を学ぶことです。

パーセンテージ寸法

画面の特定の部分を埋めたいが、flexレイアウトを使用しない場合は、コンポーネントのスタイルに**パーセンテージ値**を使用できます。フレキシブル寸法と同様に、パーセンテージ寸法には、サイズが定義された親が必要です。