React Nativeでflex vs flexGrow vs flexShrink vs flexBasis？

質問

react nativeを0.42にアップグレードしたのですが、これには flexGrow , flexShrink そして flexBasis の変更(または修正)と flex がレンダリングされます。

のようなエラーが出続けています。

ビューは明示的に設定された幅と高さでレンダリングされましたが、flexBasisは0でした。(これは flex: を flexGrow: に変更することで修正されるかもしれません) ビュー。

の違いを説明できますか？ flex: 1 と flexGrow: 1 . どちらかをViewに適用すると、異なることをするように見えますが、同じことをするべきではないでしょうか？

どのように解決するのですか？

以下は、検討すべきテストコードです。

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>;
}

上記のコードのスクリーンショットです。

追加 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>;
}

上記のコードのスクリーンショットです。

flex: 0 (デフォルト)

• flex: 0
  • 要素はコンテンツの大きさをとります。 に従って のドキュメントによると を設定することで大きさを指定する必要があります。 width と height という小道具がありますが、これらが設定されていない場合は、コンテンツに適合するようです。
• flex: 0, flexBasis: {{px}}
  • で指定された大きさを持つ要素です。 flexBasis
• flex: 0, flexGrow: 1
  • と flex: 0 と flexGrow: 1 に設定されている要素のサイズに、コンテンツのサイズ（上の例では a ）を足したものと同じです。 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 のドキュメントを参照してください。 を参照してください。
• 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}}
  • と同じです。 flex: 1, flexBasis: {{px}} から flexGrow は無視されます。
• flex: 1, flexShrink: 1, flexBasis: {{px}}
  • と同じです。 flex: 1, flexBasis: {{px}} から flexShrink は無視されます。
• flex: 1, height: {{px}}
  • と flex: 1 , height は無視されます。 使用方法 flexBasis を使います。

以下は私の観察結果です。

• トラブルシューティングのヒント。 親ビューが子ビューに成長/縮小の余地を与えていることを確認してください。 以下の点に注意してください。 flex: 1 に注目してください。これがないと、すべての子が期待通りに表示されません。
• トラブルシューティングのヒント。 を使用しないでください。 Hot Reloading を使用しないでください。数回再読み込みされた後、正しく表示されないことがあります。 を有効にすることをお勧めします。 Live Reload または コマンド + r (たくさん)。
• デフォルトのフレックス値は flex: 0 . フレックススタイル値を追加しない場合、デフォルトは0になります。
• トラブルシューティングのヒント。 もし、何かが思うように表示されない原因を突き止めようとするなら、（最も）親要素から始めて、それが子要素が必要とすることを行うのに十分なスペースを与えているかどうか確認してください。 言い換えれば、flex:1 に設定してみて、それが役に立つかどうかを確認し、次の子要素に移動して繰り返します。
• 次のように思われます。 width は常に flexDirection: "column" と見なされます。 同じことが height と flexDirection: "row" .
• これらのテストを実行した後、一般的に私は flexBasis 以上 height から flexBasis トランクス height .