下記のドキュメントを読んでみます。
Layout with Flexbox · React Native
英語がわからない人は、下記参考がよいでしょう。
React Nativeスタイリングの手引き (zenn.dev)
以下に二つ例を示します。なぜそうなるかを上のHPを参考に理解してみてください。
まず、つぎのことは押さえておいてください。
React Nativeでは、必ず１番親のコンポーネントで、flex:1がかけられる。これにより画面全体をつかうよという合図になる。
ReactNativeでは、flexDirectionは ”column” がデフォルトである。
つまり、指定しなければ、縦に、ボタンやテキストなどの部品が縦に並ぶ。
縦の並べ方を指定するには、justifyContentを使用する。
横の並べ方の指定には、alignItemsを使用する。
それより下のコンポーネントでの flexについては、同列のコンポーネントがある場合は、flexのあとの数値の合計を分母とし、それぞれのflexの数値を分子とした領地が与えられる。
