时间戳

首页 > 解决方案 > React Native - StyleSheet.absoluteFill() 和 StyleSheet.absoluteFillObject() 有什么区别？

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

问题描述

该文档提供了一个示例，该示例StyleSheet.absoluteFillObject()在使用 with 时的行为也相同StyleSheet.absoluteFill()：

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

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

标签： reactjsreact-nativecss-positionabsolute

解决方案

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} />

推荐阅读