reactjs - 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 是将 View 设置为全屏和绝对定位的简单方法。这是一个捷径:

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

}

使用它来扩展您的其他样式，如下所示:

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

绝对填充对象假设您想要绝对定位 View ，但将其向下移动 20px 以偏移状态栏(例如)。您可以将 StyleSheet.absoluteFillObject 扩展到您的样式中，然后覆盖它的值之一。

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