react-native - リアクトネイティブオーバーフローフレックスのとき

Question

したがって、上の画像では、動的テキストを「緑色」のボックスで囲むようにしています。青と黄色のテキスト ボックスがどのようにflex: 'row'構成されているかに注意してください。テキストの青のボックスは a にflex: 2あり、黄色のテキスト ボックスは にありますflex: 1。

テキストが親コンテナーに対して大きすぎるまで、問題なく動作します。

屈曲した内部の子に合わせて、必要に応じて緑のコンテナーが成長するようにしたいと思います。これは反応ネイティブで可能ですか?

これは、Web の意味でどのように見えるかのイメージです。

緑色のボックスを に設定しようとしましたflex: 1が、画面全体に表示されるので大きすぎます。設定heightは可能ですが、最大の内部コンポーネントのサイズはわかりません (少なくともいくつかのハッカーがなければ)。私も試してみましminHeightた。

誰かがこのようなことを試みましたか？内部要素の高さを自分で動的に取得する必要がありますか?

更新 - コードのビットは次のとおりです。

  <View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}>
    <View
      style={{
        minHeight: 40,
        borderWidth: 1,
        borderStyle: 'solid',
        padding: 5,
        margin: 5,
        backgroundColor: '#58c09e'
      }}
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 2, backgroundColor: '#eeff96' }}>
          <Text>
            Hello this is a long bit of text that will fill up the entire column to see how the text will wrap
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: '#eeffff' }}>
          <Text>Hello again?</Text>
        </View>
      </View>
    </View>
  </View>

ご覧いただきありがとうございます。