阵营本地溢出当柔性
问题描述:
因此,对于上面的图片,我试图让“绿色”框环绕动态文本。请注意,蓝色和黄色文本框的配置是flex: 'row'
,文本的蓝色框为flex: 2
,黄色为flex: 1
。
事情工作正常,直到父容器的文本太大。
我想让绿色容器根据需要生长以适合弯曲的内心孩子。这可能与反应本土?
这里是什么样子在网络意义上的图像:
我试过设置的绿框有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>
感谢您寻找。
答
环顾四周越来越阅读了一下后确定:flex vs flexGrow vs flexShrink vs flexBasis in React Native?我能找出问题。
我需要的是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的不“工作[S]的与React Native中的方式相同,就像它在Web上的CSS一样“,就像他们在文档中声明的一样。
答
尝试这个Coode - >
<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>
你可以包含一些代码吗? –
如果您设置高度,那么高度不会改变,您必须使用弹性比率或设置最小高度/最大高度,并对文本执行相同操作,以便它们一起缩放,文本不会超出视图 –
@Chris请添加代码,以便我们可以帮助:) –