React Native <Text> 在 flex 中溢出 <View>

Question

所以对于上面的图像，我试图让“绿色”框环绕动态文本。注意蓝色和黄色文本框是如何flex: 'row'配置的，蓝色文本框在 a 处，黄色文本框flex: 2是flex: 1。

一切正常，直到文本对于父容器来说太大。

我希望绿色容器根据需要生长以适应弯曲的内在孩子。这可能与本机反应吗？

这是它在网络意义上的样子的图像：

我试过将绿色框设置为有一个，flex: 1但它太大了，因为它填满了整个屏幕。设置height是可能的，但我不知道最大内部组件的大小（至少没有一些hacky）。我什至试过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>

谢谢你看。

Answer 1

在查看更多内容并阅读：React Native 中的 flex 与 flexGrow 与 flexShrink 与 flexBasis 之后，好吧？我能够找出问题所在。

我需要的是flex: 0这一行：

  <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: 0, 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>
        <Text>Here's another test</Text>
      </View>
    </View>
  </View>

这产生了我所期望的：

所以我猜 flexbox 不像他们在文档中所说的那样“在 React Native 中的工作方式与在 web 上的 CSS 中的工作方式相同”。