[英]ReactNative: Unable to occupy entire screen with absolute positioning
Consider the example below. 考虑下面的示例。 The absolutely positioned
View
would only render within the bounds of its parent flexbox. 绝对定位的
View
仅在其父级flexbox的范围内渲染。
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
<Text>I am ABSOLUTE</Text>
</View>
</View>
<View style={{backgroundColor: 'blue', top: 50}}>
<View style={{margin: 10, padding: 10, height: 50}}>
<Text>I have a fixed height</Text>
</View>
</View>
</View>
</View>
PS. PS。 I'm using RN 0.42.0.
我正在使用RN 0.42.0。
" absolute
positioning is always relative to the parent" “
absolute
定位始终相对于父级”
https://facebook.github.io/react-native/docs/layout-props.html#position https://facebook.github.io/react-native/docs/layout-props.html#position
If I need a view with absolute positioning, I would place it at the bottom of root component. 如果需要绝对定位的视图,可以将其放在根组件的底部。 So based on your example it would look like -
因此,根据您的示例,它看起来像-
<View style={{flex: 1}}>
<View style={{flex: 1}}>
....
</View>
<View style={{backgroundColor: 'red', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
<Text>I am ABSOLUTE</Text>
</View>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.