React Native中透明状态栏下Dimensions.get('window').height未包含状态栏高度的问题咨询

我在Android 14及更早版本中把状态栏设置为透明，目的是让应用内容能延伸到状态栏下方（Android 15默认强制边缘到边缘设计）。根据React Native文档的描述：

For Android, the window dimensions will exclude the size used by the status bar (if not translucent) and bottom navigation bar.

但实际测试下来，就算我用StatusBar的translucent属性把状态栏设为透明了，Dimensions.get('window').height还是没有包含状态栏区域的高度。我搞不清这到底是个bug，还是我哪里操作遗漏了？

我的测试是在一个全新的React Native项目里进行的，用的是下面这段App.tsx代码，运行在Android设备上。测试前需要先安装react-native-safe-area-context依赖。

import React from 'react';
import { Dimensions, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

const ContentView = () => {
  const insets = useSafeAreaInsets();

  const heightPercentage = (percentage: number) => 
    (Dimensions.get('window').height - insets.top - insets.bottom) * percentage / 100;
  const widthPercentage = (percentage: number) => 
    (Dimensions.get('window').width - insets.left - insets.right) * percentage / 100;

  const CustomStatusBar = (): React.JSX.Element => {
    return (
      <View style={{ height: insets.top, width: widthPercentage(100), backgroundColor: 'red' }}>
        <SafeAreaView>
          <StatusBar barStyle='dark-content' translucent backgroundColor='transparent' />
        </SafeAreaView>
      </View>
    );
  };

  const BottomBar = (): React.JSX.Element => {
    return <View style={{ height: insets.bottom, width: widthPercentage(100), backgroundColor: 'red' }} />
  }

  const LeftBar = (): React.JSX.Element => {
    return <View style={{ height: heightPercentage(100), width: insets.left, backgroundColor: 'red' }} />
  }

  const RightBar = (): React.JSX.Element => {
    return <View style={{ height: heightPercentage(100), width: insets.right, backgroundColor: 'red' }} />
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}>
      <CustomStatusBar />
      {/* content */}
      <View style={{ flexDirection: 'row', height: heightPercentage(100), width: widthPercentage(100) }}>
        <LeftBar />
        {/* content */}
        <View style={{ backgroundColor: 'green', height: heightPercentage(100), width: widthPercentage(70), justifyContent: 'center', paddingLeft: widthPercentage(2) }}>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>top: {insets.top}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>right: {insets.right}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>bottom: {insets.bottom}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>left: {insets.left}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>StatusBar's height: {StatusBar.currentHeight}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>window's heihgt: {Dimensions.get('window').height}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>screen's heihgt: {Dimensions.get('screen').height}</Text>
          <Text style={{ color: 'white', fontSize: heightPercentage(2) }}>heightPercentage(100): {heightPercentage(100)}</Text>
        </View>
        <RightBar />
      </View>
      <BottomBar />
    </View>
  );
}

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider style={{ flex: 1 }}>
      <ContentView />
    </SafeAreaProvider>
  );
}

export default App;

内容来源于stack exchange