【ReactNative】flexGrow、flexShrink、flexBasis

むしろCSSのお話ですがよく知らなかったので。

reactnative.dev

flexGrow

親要素に対して幅が余っていた場合に、そのあまりを分配する比重を定義する。 例えばwidth:375のボックスの中にwidth:100のボックスが3つあれば75余るので、それを比重に応じて拡大することになる。 1:2:2であれば子要素は25:50:50それぞれ拡大される。0であれば配分されない。

flexShrink

親要素に対して幅がオーバーした際に、オーバーした分を縮める比重を定義する。 例えばwidth:250のボックスの中にwidth:100のボックスが3つあれ50足りないので、その分を比重に応じて縮めることになる。 1:2:2であれば子要素はそれぞれ10:20:20それぞれ縮小される。0であれば縮小されない。

flexBasis

子要素に設定する拡大縮小前のサイズです。widthとheightを設定するのと同じ。 親のflexDirectionがrowの場合はwidthを、columnの場合はheightを設定する形になる。 width、heightの指定を上書きするが、auto指定でwidth、heightを参照する容易なるらしい。 動的に縦横が変わる場合に利点があるよう。

developer.mozilla.org

yogalayout.com

const FlexScreen = () => {
  return (
    <View
      style={{
        backgroundColor: 'mediumpurple',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        width: 250,
      }}
    >
      <View
        style={{
          backgroundColor: 'orangered',
          height: 100,
          flexBasis: 100,
          flexGrow: 1,
          flexShrink: 1,
        }}
      >
        <Text>えええ</Text>
      </View>
      <View
        style={{
          backgroundColor: 'deepskyblue',
          height: 100,
          // alignSelf: 'flex-end',
          flexBasis: 100,
          flexGrow: 2,
          flexShrink: 2,
        }}
      >
        <Text>おおお</Text>
      </View>
      <View
        style={{
          backgroundColor: 'seagreen',
          height: 100,
          flexBasis: 100,
          flexGrow: 2,
          flexShrink: 2,
        }}
      >
        <Text>かかか</Text>
      </View>
    </View>
  );
};