web-dev-qa-db-ja.com

React Nativeのflex vs flexGrow vs flexShrink vs flexBasis？

最後に、flexGrow、flexShrink、およびflexBasisの導入とflexのレンダリング方法の変更（または修正）を含む、react nativeを0.42にアップグレードしました。

次のようなエラーが発生し続けます：

ビューは、明示的に幅/高さを設定してレンダリングされましたが、flexBasisは0です。 （これはflex：をflexGrow：に変更することで修正できます）ビュー：

誰かがflex: 1とflexGrow: 1の違いを説明できますか。ビューにどちらか一方を適用すると、異なることをするように見えますが、同じことをするべきではありませんか？

react-nativeflexboxflex-grow
53
Dev01

考慮すべきテストコードを次に示します。

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{backgroundColor: "chartreuse"}}><Text>Nothing (17px)</Text></View>

        <View style={{flex: 0, backgroundColor: "yellow"}}><Text>flex: 0 (17px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1 (17px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "blue"}}><Text>flex: 1 (80px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10 (90px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10 (90px)</Text></View>
    </View>;
}

上記のコードのスクリーンショットは次のとおりです。

Screenshot

widthおよびheightを追加しました：

render() {
    return <View style={{flex: 1,backgroundColor: "cornflowerblue"}}>
        <View style={{flex: 0, backgroundColor: "orange"}}><Text>flex: 0 (17px)</Text></View>
        <View style={{flex: 0, width: 700, height: 20, backgroundColor: "yellow"}}><Text>flex: 0, width: 700, height: 20 (20px)</Text></View>

        <View style={{flex: 0, flexBasis: 10, width: 700, height: 20, backgroundColor: "brown"}}><Text>flex: 0, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>
        <View style={{flex: 0, flexGrow: 1, width: 700, height: 20, backgroundColor: "orange"}}><Text>flex: 0, flexGrow: 1, width: 700, height: 20 (90px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, width: 700, height: 20, backgroundColor: "tan"}}><Text>flex: 0, flexShrink: 1, width: 700, height: 20 (20px)</Text></View>
        <View style={{flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "purple"}}><Text>flex: 0, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "gray"}}><Text>flex: 0, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (10px with 7px hidden below the next element)</Text></View>

        <View style={{flex: 1, backgroundColor: "orange"}}><Text>flex: 1 (70px)</Text></View>
        <View style={{flex: 1, width: 700, height: 20, backgroundColor: "blue"}}><Text>flex: 1, width: 700, height: 20 (70px)</Text></View>

        <View style={{flex: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "cornsilk"}}><Text>flex: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, width: 700, height: 20, backgroundColor: "red"}}><Text>flex: 1, flexGrow: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, width: 700, height: 20, backgroundColor: "green"}}><Text>flex: 1, flexShrink: 1, width: 700, height: 20 (70px)</Text></View>
        <View style={{flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "aqua"}}><Text>flex: 1, flexGrow: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
        <View style={{flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20, backgroundColor: "pink"}}><Text>flex: 1, flexShrink: 1, flexBasis: 10, width: 700, height: 20 (80px)</Text></View>
    </View>;
}

上記のコードのスクリーンショットは次のとおりです。

Screenshot 2

flex: 0（デフォルト）

  • flex: 0
    • 要素はコンテンツのサイズを取ります。 ドキュメント によれば、widthおよびheightの小道具を設定することでサイズを設定する必要がありますが、設定されていない場合はコンテンツに収まるようです。
  • flex: 0, flexBasis: {{px}}
    • 要素はflexBasisで指定されたサイズを取ります
  • flex: 0, flexGrow: 1
    • flex: 0およびflexGrow: 1;を使用これは、コンテンツのサイズ（上記の例では）をflex: 1に設定されている要素のサイズに追加するのと同じです。コンテンツのサイズを追加するピクセル数を追加する代わりに、flex: 1, flexBasis: 10に似ています。
  • flex: 0, flexShrink: 1
    • flex: 0とflexShrink: 1を使用すると、要素はコンテンツのサイズを取るように見えます。つまり、単にflex: 0と同じです。コンテンツよりも大きくなる状況があるとは思いますが、まだ見ていません。
  • flex: 0, flexGrow: 1, flexBasis: {{px}}
    • これはflex: 0, flexGrow: 1と同じですが、コンテンツサイズをflex: 1要素に追加する代わりに、指定されたピクセル数を追加する点が異なります。
  • flex: 0, flexShrink: 1, flexBasis: {{px}}
    • これはflex: 0, flexBasis: {{px}}と同じです。
  • flex: 0, height: {{px}}
    • flex: 0では、heightはflexBasisと同様に扱われます。 heightとflexBasisの両方が設定されている場合、heightは無視されます。

flex: 1

  • flex: 1
    • 要素は使用可能なスペースを取ります。詳細については、 Layout Props documentation を参照してください
  • flex: 1, flexBasis: {{px}}
    • flex: 1およびflexBasis: {{px}};を使用flexBasisの値が要素のサイズに追加されます。つまり、flex: 1要素を取り、flexBasisで設定されたピクセル数を追加するようなものです。したがって、flex: 1要素が50pxで、flexBasis: 20を追加すると、要素は70pxになります。
  • flex: 1, flexGrow: 1
    • 無視された
  • flex: 1, flexShrink: 1
    • 無視された
  • flex: 1, flexGrow: 1, flexBasis: {{px}}
    • flexGrowは無視されるため、これはflex: 1, flexBasis: {{px}}と同じです。
  • flex: 1, flexShrink: 1, flexBasis: {{px}}
    • flexShrinkは無視されるため、これはflex: 1, flexBasis: {{px}}と同じです。
  • flex: 1, height: {{px}}
    • flex: 1では、heightは無視されます。代わりにflexBasisを使用してください。

私の観察は次のとおりです。

  • トラブルシューティングのヒント：親ビューが子供に成長/縮小の余地を与えていることを確認してください。親ビューのflex: 1に注意してください。これがないと、すべての子が期待どおりに表示されません。
  • トラブルシューティングのヒント：これらの値をテストするときにHot Reloadingを使用しないでください。数回リロードした後、要素を誤って表示する可能性があります。 Live Reloadを有効にするか、 command + r （たくさん）。
  • デフォルトのフレックス値はflex: 0です。フレックススタイルの値を追加しない場合、デフォルトで0になります。
  • トラブルシューティングのヒント：考えられるように何かが表示されない理由を理解しようとする場合は、（最も）親要素から始めます必要なことを行うのに十分なスペースを子供たちに与えていることを確認してください。つまり、flex：1に設定して、それが役立つかどうかを確認してから、次の子に移動して繰り返します。
  • widthは、他のflexプロパティに関係なく、常にflexDirection: "column"で考慮されるようです。 flexDirection: "row"を使用したheightについても同様です。
  • これらのテストを実行した後、一般的にflexBasisはheightに勝るので、flexBasisよりもheightを使用します。
145
Dev01