React Native的初學(xué)者應(yīng)該了解RN支持且只支持Flex布局。Flex布局相對(duì)于Android來(lái)說(shuō)就是LinearLayout線(xiàn)性布局。那么線(xiàn)性布局怎樣實(shí)現(xiàn)一個(gè)垂直居中的loading呢?
loading應(yīng)該是在三維z軸高于普通視圖的，用絕對(duì)布局實(shí)現(xiàn)的，那么RN支持絕對(duì)布局嗎? 答案：是的，RN支持。使用position: 'absolute'來(lái)實(shí)現(xiàn)。
RN中的position屬性的默認(rèn)值是relative。只支持兩個(gè)值relative | absolute。了解CSS的同學(xué)對(duì)它應(yīng)該很熟悉，relative指的是相對(duì)定位，配合top, right, bottom, left四個(gè)方位屬性，加上z-index堆疊順序來(lái)對(duì)一個(gè)元素進(jìn)行相對(duì)于自己左上角為原點(diǎn)的定位。比如：
相對(duì)定位的元素沒(méi)有脫離文檔流，依然占據(jù)著原來(lái)的空間，不影響周邊元素的位置，如果與其他元素相遇，按照z-index來(lái)覺(jué)得誰(shuí)顯示在“上面”而被我們看到，這個(gè)方式可以理解為“靈魂出竅”，“靈魂”展示在那里，但“竅”還占據(jù)著原有的空間。對(duì)應(yīng)上面的示例中，盡管“積分商城”這個(gè)元素采用相對(duì)定位進(jìn)行了移動(dòng)，但是后面的文案位置依然沒(méi)有受到影響。
absolute即絕對(duì)定位，它是相對(duì)于父級(jí)元素的左上角為原點(diǎn)來(lái)定位。
(補(bǔ)充：CSS中是相對(duì)最近的一個(gè)非static的元素作為父級(jí)，但是RN沒(méi)那么復(fù)雜，只是相對(duì)于它的父級(jí)，因?yàn)樯衔奶岬?，RN中的position屬性的默認(rèn)值是relative。只支持兩個(gè)值relative | absolute。)
絕對(duì)定位的元素不會(huì)占據(jù)原有的流式空間，后面的元素會(huì)“補(bǔ)上來(lái)”，比如，我們將之前的示例中的relative改成absolute, 看看后面的文案是否收到影響：
了解position以后，我們就可以使用其做一個(gè)絕對(duì)定位，垂直居中的loading了。垂直居中怎樣實(shí)現(xiàn)呢？比如一個(gè)寬高為，就可以這樣寫(xiě)：
loading:{
width: 100,
height: 100,
position: 'absolute',
top: '50%',
left: '50%',
marginTop: -50,
marginLeft: -50
}
top與marginTop這樣的配合方式就不多說(shuō)了，要注意的是這個(gè)元素的父級(jí)最好是頁(yè)面最外層或者是高度100%的元素。如果是一個(gè)不定高度的
ScrollView，可以將loading至于ScrollView同級(jí)，然后外邊套一個(gè)View的父級(jí)就OK了。
本文以loading為例，主要介紹了絕對(duì)定位與Flex布局的結(jié)合使用，實(shí)際項(xiàng)目中建議使用原生的loading組件。
延伸思考：
- RN中，如何禁止loading，蒙層下面的點(diǎn)擊事件？
- 不定寬高的元素怎樣絕對(duì)居中？
