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

【问题标题】：React Native - What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()?React Native - StyleSheet.absoluteFill() 和 StyleSheet.absoluteFillObject() 有什么区别？
【发布时间】：2019-05-09 15:28:15
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-native css-position absolute

【解决方案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]} />

绝对填充对象假设您想要绝对定位您的视图，但将其向下移动 20 像素以偏移状态栏（例如）。您可以将 StyleSheet.absoluteFillObject 传播到您的样式中，然后覆盖其中一个值。

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

【讨论】：

您在StyleSheet.absoluteFillObject 的答案中提到的事情也可以用StyleSheet.absoluteFill 完成，那么，有什么区别？

【解决方案2】：

这两者没有区别。你可以在StyleSheet.js看到这个：

 /**
   * A very common pattern is to create overlays with position absolute and zero positioning,
   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
   * styles.
   */
  absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.

  /**
   * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
   * used to create a customized entry in a `StyleSheet`, e.g.:
   *
   *   const styles = StyleSheet.create({
   *     wrapper: {
   *       ...StyleSheet.absoluteFillObject,
   *       top: 10,
   *       backgroundColor: 'transparent',
   *     },
   *   });
   */
  absoluteFillObject: absoluteFill,

【讨论】：

是的，“使用源代码，卢克”！这是检查最新版本情况的参考：github.com/facebook/react-native/blob/master/Libraries/…

【解决方案3】：

从 0.62 版开始，根据official document 完全没有区别

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

【讨论】：

【解决方案4】：

Currently, there is no difference between using absoluteFill vs. absoluteFillObject.

【讨论】：

【解决方案5】：

我尝试打印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}

【讨论】：

【解决方案6】：

我可能会迟到。但是打字稿中的absoluteFill和absoluteFillObject还是有一些区别的。

主要在typescript中，类型：

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

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

对于 JavaScript，没有区别。

【讨论】：

【解决方案7】：

目前（React Native 0.66），documentation 状态：

使用absoluteFill 和absoluteFillObject 没有区别。

【讨论】：