React Native的初學(xué)者應(yīng)該了解RN支持且只支持Flex布局蜕乡。Flex布局相對于Android來說就是LinearLayout線性布局锅铅。那么線性布局怎樣實(shí)現(xiàn)一個垂直居中的loading呢?
loading應(yīng)該是在三維z軸高于普通視圖的，用絕對布局實(shí)現(xiàn)的羞迷，那么RN支持絕對布局嗎? 答案：是的界轩，RN支持。使用position: 'absolute'來實(shí)現(xiàn)衔瓮。
RN中的position屬性的默認(rèn)值是relative浊猾。只支持兩個值relative | absolute。了解CSS的同學(xué)對它應(yīng)該很熟悉热鞍，relative指的是相對定位葫慎，配合top, right, bottom, left四個方位屬性，加上z-index堆疊順序來對一個元素進(jìn)行相對于自己左上角為原點(diǎn)的定位薇宠。比如：
相對定位的元素沒有脫離文檔流偷办，依然占據(jù)著原來的空間，不影響周邊元素的位置澄港，如果與其他元素相遇椒涯，按照z-index來覺得誰顯示在“上面”而被我們看到，這個方式可以理解為“靈魂出竅”慢睡，“靈魂”展示在那里逐工，但“竅”還占據(jù)著原有的空間铡溪。對應(yīng)上面的示例中漂辐，盡管“積分商城”這個元素采用相對定位進(jìn)行了移動，但是后面的文案位置依然沒有受到影響棕硫。
absolute即絕對定位髓涯，它是相對于父級元素的左上角為原點(diǎn)來定位。
(補(bǔ)充：CSS中是相對最近的一個非static的元素作為父級哈扮，但是RN沒那么復(fù)雜纬纪，只是相對于它的父級，因?yàn)樯衔奶岬交猓琑N中的position屬性的默認(rèn)值是relative包各。只支持兩個值relative | absolute。)
絕對定位的元素不會占據(jù)原有的流式空間靶庙，后面的元素會“補(bǔ)上來”问畅，比如，我們將之前的示例中的relative改成absolute, 看看后面的文案是否收到影響：
了解position以后，我們就可以使用其做一個絕對定位护姆，垂直居中的loading了矾端。垂直居中怎樣實(shí)現(xiàn)呢？比如一個寬高為卵皂，就可以這樣寫：
loading:{
width: 100,
height: 100,
position: 'absolute',
top: '50%',
left: '50%',
marginTop: -50,
marginLeft: -50
}
top與marginTop這樣的配合方式就不多說了秩铆，要注意的是這個元素的父級最好是頁面最外層或者是高度100%的元素。如果是一個不定高度的
ScrollView灯变，可以將loading至于ScrollView同級殴玛，然后外邊套一個View的父級就OK了。
本文以loading為例添祸，主要介紹了絕對定位與Flex布局的結(jié)合使用族阅，實(shí)際項(xiàng)目中建議使用原生的loading組件。
延伸思考：
- RN中膝捞，如何禁止loading坦刀，蒙層下面的點(diǎn)擊事件？
- 不定寬高的元素怎樣絕對居中蔬咬？
