React-Native在iOS平台上不支持StatusBar的背景颜色更改，但在Android平台上，这是可以的（https：//facebook.github.io/react-native/docs/statusbar#backgroundcolor）。我为你的问题写了一个解决方案。你可以安全使用它

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </View>
        );
    }
}

export default App;

对于SafeAreaView：

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";
import SafeAreaView from "react-native-safe-area-view";
//You can also use react-navigation package for SafeAreaView with forceInset.

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <SafeAreaView style={{flex:1}}
                forceInset={{top: 'never'}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </SafeAreaView>
        );
    }
}

export default App;

支持iPhone X

除了**@sdkcy的答案外，对于iPhone X**，STATUS_BAR_HEIGHT不能为20。
我通过安装以下库解决了这个问题：
https://www.npmjs.com/package/react-native-status-bar-height

安装

npm install --save react-native-status-bar-height

导入

import { getStatusBarHeight } from 'react-native-status-bar-height';

并像这样更新STATUS_BAR_HEIGHT：

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? getStatusBarHeight() : 0;

最后，我还将Android的高度更改为0，因为它会影响NavigationBar的高度，但如果它对您来说工作良好，您可以保持不变。
希望这对你有帮助。

iPhone X使用44 pt高状态栏
const STATUS_BAR_HEIGHT =平台.OS === 'ios'？44：StatusBar.currentHeight;
参考这些备忘录

• IOS Design Guidelines
• IOS Cheat Sheet

iOS不像Android那样支持React-Native中的StatusBar组件。实现SafeAreaView组件以某种方式降低了iOS中原始状态栏的视图。我搜索了许多解决方案，其中大多数都被引导使用自定义组件或使用库。这是一个快速的解决方案，在我的脑海里，它工作得很好。就在SafeAreaView将整个UI Package 在JSX片段（如<></>）下之前。
我给你一个例子，让你更好地理解我的代码。我已经在iPhone 11 Pro Max和iPhone 14上测试过了，效果很好。

import React, {useState, useContext} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  Dimensions,
  StyleSheet,
  Alert,
  FlatList,
  StatusBar,
  TouchableOpacity,
  Image,
  ScrollView,
  Linking,
  Platform,
  ActivityIndicator,
} from 'react-native';
const {height, width} = Dimensions.get('window');
import {
  BackArrow,
  UserIcon,
  BellIcon,
  LogoutIcon,
  HomeIcon,
} from '../Includes/Includes';
import Colors from '../Components/Colors';
import {WebView} from 'react-native-webview';
const Notification = () => {
return(
<>
    {
      Platform.OS == "ios" && (
        <View style={{width: "100%", height: height * 0.05, backgroundColor: Colors.themeColor}}/>
      )
    }
    <SafeAreaView style={styles.mainContainer}>
      <StatusBar
        barStyle={'light-content'}
        backgroundColor={Colors.themeColor}
      />
      <InnerHeader />
      <MyView />
</SafeAreaView>
</>
)
}