React Native 沉浸式状态栏Android4.4不适配解决方案
写这篇文章的时候用的 react native 版本 @0.45 ,刚出来0.46版本,这个版本不好用,没有在这个版本上面测试
UI设计狮给的十六进制颜色我原原本本的塞给了Statusbar,但是手机上这个状态栏颜色就是跟设计狮给我的效果图不一样,总是感觉我设置的背景色上面还有一个半透明的白色背景遮挡,导致颜色变浅,然后我又经历了痛苦的百度过程,发现Statusbar有个参数 translucent,把它的属性设置为true,好了效果实现了。但是新的问题出来了,下面的导航栏往上去了,渲染出来的状态栏颜色是导航栏与透明的状态栏重叠出来的颜色,我需要把我自定义的导航栏上面加一截,高度为状态栏的高度,这样才是我要的效果。当我加上这个高度之后又特么出现新的问题了。。。。
Android从4.4版本开始出现了类似于IOS的沉浸式状态栏,效果差不多,StatusBar中的 translucent属性设置为true,在Android5.0版本及以上能够达到沉浸效果,但明明是 Android4.4开始有这个效果了,为什么还是没办法显示呢。这个问题可能需要问一下脸书或者更加强大的搜索工具了,反正我没百度到。Orz
还好撸主机智,直接判断你的Android版本,根据版本设置导航栏的高度,是和尚就念经,是驴子就拉磨,下面是撸主的代码
状态的属性
<StatusBar
translucent={true}
animated={true}
barStyle="light-content"
networkActivityIndicatorVisible={true}
/>
导航栏,用的功能强大的第三方库 native-base
import React, {Component} from “react”;
import {Image, View} from “react-native”;
import {Body, Button, Container, Header, Icon, Left, Right, Title} from “native-base”;
import * as HeaderBarStyle from “../styleSheet/hearderBarStyle”;
export default class HeaderBar extends Component {
render() {
return (
<View style={HeaderBarStyle.toolBarView}>
<Header style={{backgroundColor: 'rgba(225,16,16,0.80)'}}
androidStatusBarColor="rgba(176,13,13,0.54)"
iosBarStyle="light-content"
>
<Left>
<Button transparent onPress={this.props.onPress}>
<Image style={HeaderBarStyle.image}
source={this.props.source}/>
</Button>
</Left>
<Body>
<Title>{this.props.title}</Title>
</Body>
<Right>
<Button transparent onPress={this.props.touch}>
<Image style={HeaderBarStyle.image}
source={this.props.image}/>
</Button>
</Right>
</Header>
</View>
);
}
}
重点看导航栏的样式 HeaderBarStyle.toolBarView
//首先判断是苹果还是Android,是苹果的,把状态栏高度设置为80,否则是Android,先判断Android的版本号是不是大于4.4的版本,是则设置高度80,不是则设置高度为80-状态栏的高度,这样在4.4版本以下显示才不会有很大差异。
toolBarView: {
height: Platform.OS == 'IOS' ? 80 :parseFloat(DeviceInfo.getSystemVersion()) > 4.4 ? 80 : 80 - StatusBar.currentHeight,
backgroundColor: 'rgba(225,16,16,0.80)',
width: width,
paddingTop: Platform.OS == 'IOS' ? 20 : parseFloat(DeviceInfo.getSystemVersion()) > 4.4 ? StatusBar.currentHeight : 0
}