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;