反应本机< Text> < View>溢出在弯曲时 [英] React Native <Text> overflows <View> when in a flex

问题描述

因此对于上面的图像，我试图使绿色"框环绕动态文本.请注意，蓝色和黄色文本框在flex: 'row'配置中的情况如何，蓝色文本框在flex: 2处，黄色文本在flex: 1.

So for the above image, I am attempting to get the "green" box to wrap around the dynamic text. Notice how the blue and yellow text boxes are in a flex: 'row' configuration, and the blue box of text is at a flex: 2 and the yellow is flex: 1.

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

Things work fine until the text is too big for the parent container.

我希望绿色容器能够根据需要生长，以适应弯曲的内部孩子.使用React Native可以做到这一点吗?

I'd like for the green container to grow as needed to fit the flexed inner children. Is this possible with react native?

以下是网络上的图片:

我尝试将绿色框设置为具有flex: 1，但是它太大了，因为它会填满整个屏幕.设置height是可能的，但是我不知道最大内部组件的大小(至少没有一些黑客).我什至尝试过minHeight.

I've tried setting the green box to have a flex: 1 but then it's way too big as it fills the entire screen. Setting height is possible, but I don't know the size of the biggest inner component (at least without some hackery). I've even tried minHeight.

有人尝试过这样的事情吗?我是否需要自己动态获取内部元素的高度?

Has anyone attempted something like this? Do I need to get the height of the inner elements dynamically myself?

更新-这是代码的一部分:

UPDATE - Here's the bit of code:

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

感谢您的光临.

推荐答案

确定更多内容并阅读以下内容:

Ok after looking around a bit more and reading: flex vs flexGrow vs flexShrink vs flexBasis in React Native? I was able to figure out the problem.

我需要的是该行上的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中那样工作".

So I guess the flexbox doesn't "work[s] the same way in React Native as it does in CSS on the web" like they state in their documentation.

这篇关于反应本机< Text> < View>溢出在弯曲时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！