沉浸式状态栏

来源：互联网发布：淘宝的机器人编辑：程序博客网时间：2024/05/22 13:07

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版本，根据版本设置导航栏的高度，是和尚就念经，是驴子就拉磨，下面是撸主的代码

状态的属性

<StatusBartranslucent={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    }

第一次写react native 的博客，欢迎技术交流

阅读全文

0 0