React Native - StyleSheet.absoluteFill() 和 StyleSheet.absoluteFillObject() 有什么区别？

Question

该文档提供了一个示例，StyleSheet.absoluteFillObject()其行为在使用 with 时也相同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 中看到这个

Answer 3

我参加聚会可能会迟到。absoluteFill但 typescript和in之间存在一些差异absoluteFillObject。

主要以typescript为主，类型为：

• absoluteFill是RegisteredStyle<StyleSheet.AbsoluteFillStyle>
• absoluteFillObject是StyleSheet.AbsoluteFillStyle

const styles = StyleSheet.create({
    container: {
        // must use "absoluteFillObject" in typescript
        ...StyleSheet.absoluteFillObject,
    }
})

对于 JavaScript 来说，没有区别。