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 了.
延伸思考:
RN 中, 如何禁止 loading, 蒙层下面的点击事件?
不定宽高的元素怎样绝对居中?
来源: http://www.jianshu.com/p/2bafbef78fd9