高さと幅
コンポーネントの高さと幅は、画面上でのサイズを決定します。
固定の寸法
コンポーネントの寸法を設定する一般的な方法は、スタイルに固定の width と height を追加することです。React Native のすべての寸法は単位がなく、密度非依存ピクセル (density-independent pixels) を表します。
この方法での寸法設定は、コンポーネントのサイズが画面サイズに基づいて計算されるのではなく、常に特定のポイント数に固定されるべき場合に一般的です。
ポイントから物理的な測定単位への普遍的なマッピングはありません。これは、固定の寸法を持つコンポーネントが、異なるデバイスや画面サイズで同じ物理的なサイズを持たない可能性があることを意味します。しかし、この違いはほとんどのユースケースでは気付かれない程度です。
Flexによる寸法
コンポーネントのスタイルで flex を使用すると、利用可能なスペースに基づいてコンポーネントが動的に拡大・縮小します。通常は flex: 1 を使用します。これは、コンポーネントが利用可能なすべてのスペースを、同じ親を持つ他のコンポーネントと均等に共有して埋めるように指示します。flex の値が大きいほど、そのコンポーネントが兄弟コンポーネントと比較して占めるスペースの比率が高くなります。
コンポーネントが利用可能なスペースを埋めるように拡大できるのは、その親の寸法が 0 より大きい場合のみです。親に固定の width と height または flex のいずれも指定されていない場合、親の寸法は 0 になり、flex を持つ子コンポーネントは表示されません。
コンポーネントのサイズを制御できるようになったら、次のステップは画面上でのレイアウト方法を学ぶことです。
パーセンテージによる寸法
画面の特定の部分を埋めたいが、flex レイアウトを使用したくない場合は、コンポーネントのスタイルにパーセンテージ値を使用できます。Flexによる寸法と同様に、パーセンテージによる寸法も、サイズが定義された親を必要とします。