React Native：高度与弹性

Question

在视图中设置多个组件的高度时，flex 和 height 设置高度有区别吗？

例如，

1) <View>
       <View style={{flex:1}}>
       </View>
       <View style={{flex:3}}>
       </View>
   </View

2) var windowSize = Dimensions.get('window');
   <View>
       <View style={{height:windowSize.height/4}}>
       </View>
       <View style={{height:windowSize.height*3/4}}>
       </View>
   </View>

Answer 1

是的。对于 flex，尺寸参考是其父视图布局尺寸，而如果您使用 window dimensions ，它将整个 window 尺寸作为参考。尝试在 1) 中设置一些高度和宽度并查看。

Answer 2

是的，当您旋转设备时，flex 会响应，而 window 则不会。

例如，如果设备尺寸为 1280 x 720，则结果如下：

弹性：纵向模式高度 = 1280。横向模式高度 = 720

Window: 纵向模式高度 = 1280。横向模式高度 = 1280

Window 在安装组件时检索一次尺寸。是的，您可以在屏幕旋转时为 window 手动添加检测器，但我不明白您为什么要在 flex 又短又简单的情况下付出那么多努力。

React Native：高度与弹性

React Native: Height vs flex

height

flexbox

reactjs

react-native