StatusBar
控制应用状态栏的组件。
和导航器一起使用的注意事项：
由于StatusBar可以在任意视图中加载，可以放置多个且后加载的会覆盖先加载的。因此在配合导航器使用时，请务必考虑清楚StatusBar的放置顺序。

示例：
import React, { useState } from "react";
import { Button, Text, StyleSheet, StatusBar, View } from "react-native";
import Constants from "expo-constants";
const App = () => {
const styleTypes = ['default','dark-content', 'light-content'];
const [visibleStatusBar, setVisibleStatusBar] = useState(false);
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);
const changeVisibilityStatusBar = () => {
setVisibleStatusBar(!visibleStatusBar);
};
const changeStyleStatusBar = () => {
const styleId = styleTypes.indexOf(styleStatusBar) + 1;
if(styleId === styleTypes.length){
return setStyleStatusBar(styleTypes[0]);
}
return setStyleStatusBar(styleTypes[styleId]);
};
return (
<View style={styles.container}>
<View>
<Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
<Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible': 'Hidden'}</Text>
</View>
<StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
<View>
<StatusBar hidden={visibleStatusBar} />
</View>
<View style={styles.buttonContainer}>
<Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
</View>
<View style={styles.buttonContainer}>
<Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ECF0F1',
padding: 8
},
buttonContainer:{
padding: 10
},
textStyle:{
textAlign: 'center'
}
});
export default App;