React Native-StyleSheet.absoluteFill（）和StyleSheet.absoluteFillObject（）有什么区别？

Question

documentation提供了StyleSheet.absoluteFillObject()的示例，在与StyleSheet.absoluteFill()一起使用时其行为也相同：

const styles = StyleSheet.create({
  wrapper: {
    ...StyleSheet.absoluteFillObject,
    top: 10,
    backgroundColor: 'transparent',
  },
});

StyleSheet.absoluteFill()和StyleSheet.absoluteFillObject()有什么区别？一个小例子将不胜感激。谢谢!!!

Answer 1

从0.62版开始，根据official document

完全没有区别

如果像我一样使用EXPO Snack，则此时absoluteFill在网络上的预览似乎有问题。在真实设备上应该没问题。

Answer 2

absoluteFill是将视图设置为全屏和绝对定位的简便方法。这是捷径：

{
 position: 'absolute',
 top: 0,
 left: 0,
 bottom: 0,
 right: 0

}

使用它来扩展其他样式，如下所示：

const styles = StyleSheet.create({
  container: {
   backgroundColor: 'red'
   }
});
<View style={[StyleSheet.absoluteFill, styles.container]} />

absoluteFillObject 假设您要绝对定位视图，但将其降低20像素以抵消状态栏的偏移（例如）。 您可以将StyleSheet.absoluteFillObject传播到样式中，然后覆盖其值之一。

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
   top: 20,
    backgroundColor: 'red'
  }
});
<View style={styles.container} />

Answer 3

确实没有区别。比较两者，它们是相等的。

2

check it out

Answer 4

两者之间没有区别。您可以在StyleSheet.js中看到

Answer 5

当前，使用absoluteFill与absoluteFillObject之间没有区别。

Answer 6

我已尝试打印 absoluteFill 和 absoluteFillObject 的值。
他们没有区别。它们是相同的值。

[LOG] absoluteFill: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
[LOG] absoluteFillObject: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}