移动跨平台框架React Native状态栏组件StatusBar【16】
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#000000" barStyle="light-content" />
<View style={styles.content}>
<Text style={styles.text}>Hello, World!</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
color: '#ffffff',
}
});
export default App;
这个代码实例展示了如何在一个React Native应用中使用状态栏组件StatusBar
。它设置了状态栏的背景颜色为黑色,并将文本设置为亮色模式,以确保文本可读性。这是一个简单的例子,展示了如何将StatusBar
组件整合到React Native应用中。
评论已关闭