react native沉浸式(透明)狀态欄與标題導航欄

最近要做一款APP，需要同時相容Android和IOS,因對Android和IOS原生開發都不熟悉，為了盡快完成，最終敲定用react native來實作(雖然對react native也是小白)。

APP中有幾個頁面的頭部設計跟微信朋友圈的頭部相似，狀态欄和标題欄是透明的，能清楚看到下面的圖檔，這裡需要用到狀态欄和标題欄的沉浸式設定。

要讓狀态欄透明該怎麼辦呢？首先我就想到了将背景色設定成transparent，但是試過後發現并沒有變透明。于是，我又細看StatusBar的文檔說明，找到了

translucent屬性，官方解釋：“

指定狀态欄是否透明。設定為true時，應用會延伸到狀态欄之下繪制（即所謂“沉浸式”——被狀态欄遮住一部分）。常和帶有半透明背景色的狀态欄搭配使用。

”

，于是我又調用StatusBar.setTranslucent(true)。但是應用頁面仍沒有在狀态欄、标題欄之下繪制，于是便想到可能是标題欄在起作用，我們路由用的是react-navigation，我又把路由生成的标題欄去掉(header: null)，果然好了。

這樣一來，雖然頁面已經在狀态欄下面繪制了，可是标題導航欄卻沒有了，難道我要自己動手模拟一個标題導航欄出來嗎？？心裡有點不甘心。于是又把标題欄想象成一個View, 我給它設定了絕對定位(position: 'absolute')和背景色透明(backgroundColor: 'transparent'),雖然沒有成功，但是給了我一個很好的提示：“position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the headerTransparent navigationOption.”意思是，标題欄不支援position: 'absolute'，如果想要在标題欄下沉浸内容，請用navigationOption的headerTransparent選項來控制。看到這句話，我豁然開朗，頓時感覺前途一片光明。根據該提示，我看了react-navigation文檔的headerTransparent屬性作用，将navigationOptions的headerTransparent設定為true，問題完美解決。

總的來講實作狀态欄、标題欄的透明效果做了三步：1、StatusBar.setBackgroundColor('transparent');2、StatusBar.setTranslucent(true);3、navigationOptions的headerTransparent設定為true。