API兼容性:
QRN:v1.0.0
iOS:80011117
Android:60001134
Android 添加 setStyle 方法:
QRN:v3.7.0
Android:60001224
StatusBar
用来控制状态栏的效果。
StatusBar
仅支持设置 qunar-react-native
统一封装的 QRCTViewController 或者 Activity。
import { StatusBar } from 'qunar-react-native';
设置是否隐藏导航栏,hidden 为 true 时隐藏。设置成功则调用 callBack,设置失败则调用errCallBack。
设置导航栏样式 style 为 default
、 light
或 dark
。设置成功则调用 callBack,设置失败则调用 errCallBack。
可选样式 | 效果 |
---|---|
default |
默认的样式(IOS为白底黑字、Android为黑底白字) |
light |
黑底白字 |
dark |
白底黑字 |
设置状态栏颜色(仅adr支持
),color
值: #AARRGGBB
。设置成功则调用 callBack,设置失败则调用 errCallBack。
设置状态栏半透明(仅adr支持
),translucent
true: 半透明。设置成功则调用 callBack,设置失败则调用 errCallBack。
调用 API 的时机不宜过早,建议在生命周期 componentDidMount 中调用
安卓调用时会红屏提示,注意调用这个 API 前做平台的判断
import { Platform } from 'react-native';
import { StatusBar } from 'qunar-react-native';
//如果需要在页面一进入的时候就设置的话可以在页面的 render() 方法中调用下面的设置
var isIOS = Platform.OS === 'ios';
//隐藏状态栏
StatusBar.setHidden(true,
() => {
//隐藏成功
}, (error) => {
console.log(error.message);
});
//显示状态栏
StatusBar.setHidden(false,
() => {
//显示成功
}, (error) => {
console.log(error.message);
});
//设置adr状态栏颜色
if (!isIOS) {
StatusBar.setColor('#ff0000', false,
() => {
//设置成功
}, (error) => {
console.log(error.message);
});
}
//设置adr状态栏半透明
if (!isIOS) {
StatusBar.setTranslucent(true,
() => {
//设置成功
}, (error) => {
console.log(error.message);
});
}
//设置iOS状态栏颜色为白色
if (isIOS) {
StatusBar.setStyle('light',
() => {
//设置成功
}, (error) => {
console.log(JSON.stringify(error));
});
}
//设置iOS状态栏颜色为默认黑色
if (isIOS) {
StatusBar.setStyle('default',
() => {
//设置成功
}, (error) => {
console.log(JSON.stringify(error));
});
}