React Native 如何实现绝对定位的loading？

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，蒙层下面的点击事件？
不定宽高的元素怎样绝对居中？

React Native 如何实现绝对定位的loading？

猜你喜欢