React Native 中的 StatusBar 采用覆盖规则,可以在一个页面中定义多个 StatusBar,后面定义的 StatusBar 的属性会覆盖前一个 StatusBar 设置的属性
一、StatusBar 组件常用属性
1. 是否隐藏状态栏(支持 Android和IOS):hidden 属性,值为:true、false
2. 设置状态栏样式(支持 Android和IOS):barStyle 属性,值为:default、dark-content、light-content
3. 是否支持动画(支持 Android和IOS):animated 属性,值为:true、false
4. 设置背景色(仅 Android):backgroundColor 属性,值为:色值字符串
5. 是否透明(仅 Android):translucent 属性,值为:true、false
二、 StatusBar 示例
import React from 'react';
import {StyleSheet, Text, View, StatusBar} from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<StatusBar
hidden={false} //
barStyle={'dark-content'} //
animated={false} //
backgroundColor="transparent" //
translucent={true} // 仅 Android
/>
<Text>hello world</Text>
<Text>仅 Android 支持,状态栏高度:{StatusBar.currentHeight}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'pink',
paddingTop: StatusBar.currentHeight,
},
});
export default App;
网友评论