RN v0.71.7中Dimensions.get('window').height返回屏幕高度而非窗口高度

在React Native v0.71.7版本中，部分Android设备出现异常：调用Dimensions.get('window').height时，返回的是包含Android导航栏的屏幕高度，而非设备窗口高度，导致组件显示异常。

Android模拟器配置：

avd.ini.encoding                 UTF-8
AvdId                            Nexus_7_API_32
disk.dataPartition.size          2G
fastboot.chosenSnapshotFile
fastboot.forceChosenSnapshotBoot no
fastboot.forceColdBoot           no
fastboot.forceFastBoot           yes
hw.accelerometer                 yes
hw.arc                           false
hw.audioInput                    yes
hw.battery                       yes
hw.camera.back                   virtualscene
hw.camera.front                  emulated
hw.cpu.ncore                     4
hw.device.hash2                  MD5:121629bcfab97028767e9021d5e4cdd1
hw.device.manufacturer           Google
hw.device.name                   Nexus 7 2013
hw.dPad                          no
hw.gps                           yes
hw.gpu.enabled                   yes
hw.gpu.mode                      auto
hw.initialOrientation            Portrait
hw.keyboard                      yes
hw.lcd.density                   320
hw.lcd.height                    1920
hw.lcd.width                     1200
hw.mainKeys                      no
hw.ramSize                       1536
hw.sdCard                        yes
hw.sensors.orientation           yes
hw.sensors.proximity             no
hw.trackBall                     no
image.androidVersion.api         32
image.sysdir.1                   system-images/android-32/google_apis/arm64-v8a/
PlayStore.enabled                false
runtime.network.latency          none
runtime.network.speed            full
showDeviceFrame                  yes
skin.dynamic                     yes
tag.display                      Google APIs
tag.id                           google_apis
vm.heapSize                      128

问题代码片段：

<FlatList 
  snapToOffsets={[...Array(props.count)].map((x, i) => (i*Dimensions.get('window').height))}
  renderItem={() => (
    <View style={{ height: Dimensions.get('window').height }}></View> // 此处高度包含了导航栏，导致显示异常
  )}
>
</FlatList>

从截图可见，组件高度包含导航栏高度，导致显示异常。

解决方法 #

方法1：使用useWindowDimensions替代Dimensions.get #

React Native内置的useWindowDimensions Hook能更精准获取窗口尺寸，还会自动监听尺寸变化（如横竖屏切换），可直接避免导航栏高度被误算的问题：

import { useWindowDimensions, FlatList, View } from 'react-native';

// 在组件内部获取尺寸
const { height: windowHeight } = useWindowDimensions();

<FlatList 
  snapToOffsets={[...Array(props.count)].map((x, i) => (i*windowHeight))}
  renderItem={() => (
    <View style={{ height: windowHeight }}></View>
  )}
>
</FlatList>

方法2：手动计算可用窗口高度 #

若必须使用Dimensions，可通过屏幕高度减去安全区域（导航栏、状态栏）高度得到实际可用窗口高度，借助react-native-safe-area-context实现：

1. 安装依赖：

npm install react-native-safe-area-context

2. 计算并使用可用高度：

import { Dimensions, FlatList, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const { height: screenHeight } = Dimensions.get('screen');
const insets = useSafeAreaInsets();
// 减去上下安全区域高度得到实际窗口高度
const windowHeight = screenHeight - insets.top - insets.bottom;

<FlatList 
  snapToOffsets={[...Array(props.count)].map((x, i) => (i*windowHeight))}
  renderItem={() => (
    <View style={{ height: windowHeight }}></View>
  )}
>
</FlatList>

方法3：升级React Native版本 #

该问题可能是v0.71.7的已知bug，可查看官方仓库确认是否有对应补丁，直接升级到v0.72及以上版本通常能修复此类尺寸计算异常问题。

内容的提问来源于stack exchange，提问作者The Mask