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

Question

所以对于上图，我试图让 "green" 框环绕动态文本。请注意蓝色和黄色文本框如何在 flex: 'row' 配置中，蓝色文本框位于 flex: 2 处，黄色文本框为 flex: 1.

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

我希望绿色容器根据需要变大以适应弯曲的内部子项。 React Native 可以做到这一点吗？

这是一张网络意义上的图片：

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

试试这个代码 -->

<View style={{flex:1,flexDirection:'row',borderWidth:1,padding:5}}>
  <View style={{flex:0.7}}>
      <Text>
            Hello This is long bit of text that will fill up the entire 
            column to see how the text will wrap
      </Text>
  </View>

  <View style={{flex:0.3}}>
      <Text>Hello Again</Text>
  </View>

</View>

Answer 2

好的，仔细查看并阅读：我能够找出问题所在。

我需要的是 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 并不像他们在文档中所说的那样"work[s] the same way in React Native as it does in CSS on the web"。

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

React Native <Text> overflows <View> when in a flex

flexbox

react-native

react-native-flexbox