最近要做一款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。