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

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说你想要绝对定位你的视图，但是把它降低20px来偏移状态栏(例如)。您可以将StyleSheet.absoluteFillObject扩展到您的样式中，然后覆盖它的一个值。

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

Answer 2

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

/** *一种非常常见的模式是创建具有绝对位置和零位置的覆盖，*因此可以使用absoluteFill，以方便并减少这些重复*样式的重复。*/ absoluteFill：(absoluteFill: any)，// TODO:这应该在我们修复下游流点之后更新。/** *有时你可能想要absoluteFill，但做了一些调整- absoluteFillObject可以*用于在StyleSheet中创建自定义条目，例如：** const absoluteFill= StyleSheet.create({ * wrapper：{* ...StyleSheet.absoluteFillObject，* top: 10，* backgroundColor：'transparent'，* }，* })；*/ absoluteFillObject: absoluteFill，

​

​

Answer 3

从0.62版本开始，根据official document，没有任何区别

如果你像我一样使用世博会的零食，在网络上的absoluteFill预览在这个时候似乎是错误的。在一个真实的设备上，它应该是好的。