React Native的初学者应该了解RN支持且只支持Flex布局。Flex布局相对于Android来说就是LinearLayout线性布局。那么线性布局怎样实现一个垂直居中的loading呢?
loading应该是在三维z轴高于普通视图的，用绝对布局实现的，那么RN支持绝对布局吗? 答案：是的，RN支持。使用position: 'absolute'来实现。
RN中的position属性的默认值是relative。只支持两个值relative | absolute。了解CSS的同学对它应该很熟悉，relative指的是相对定位，配合top, right, bottom, left四个方位属性，加上z-index堆叠顺序来对一个元素进行相对于自己左上角为原点的定位。比如：
相对布局示例
相对定位的元素没有脱离文档流，依然占据着原来的空间，不影响周边元素的位置，如果与其他元素相遇，按照z-index来觉得谁显示在“上面”而被我们看到，这个方式可以理解为“灵魂出窍”，“灵魂”展示在那里，但“窍”还占据着原有的空间。对应上面的示例中，尽管“积分商城”这个元素采用相对定位进行了移动，但是后面的文案位置依然没有受到影响。
absolute即绝对定位，它是相对于父级元素的左上角为原点来定位。
(补充：CSS中是相对最近的一个非static的元素作为父级，但是RN没那么复杂，只是相对于它的父级，因为上文提到，RN中的position属性的默认值是relative。只支持两个值relative | absolute。)
绝对定位的元素不会占据原有的流式空间，后面的元素会“补上来”，比如，我们将之前的示例中的relative改成absolute, 看看后面的文案是否收到影响：
了解position以后，我们就可以使用其做一个绝对定位，垂直居中的loading了。垂直居中怎样实现呢？比如一个宽高为，就可以这样写：
loading:{
width: 100,
height: 100,
position: 'absolute',
top: '50%',
left: '50%',
marginTop: -50,
marginLeft: -50
}
loading示例
top与marginTop这样的配合方式就不多说了，要注意的是这个元素的父级最好是页面最外层或者是高度100%的元素。如果是一个不定高度的
ScrollView，可以将loading至于ScrollView同级，然后外边套一个View的父级就OK了。
本文以loading为例，主要介绍了绝对定位与Flex布局的结合使用，实际项目中建议使用原生的loading组件。
延伸思考：
- RN中，如何禁止loading，蒙层下面的点击事件？
- 不定宽高的元素怎样绝对居中？
网友评论