React Native Android端使用useWindowDimensions获取短边尺寸异常问题

根因分析 #

这个差异本质是Android平台系统栏布局逻辑和React NativeuseWindowDimensions()实现逻辑的适配问题，不属于你的代码逻辑错误：

• 竖屏状态下，Android的顶部状态栏、底部导航栏均占用垂直方向的屏幕空间，useWindowDimensions()返回的height会自动扣除这两部分的高度，和应用根View的实际可用高度完全匹配，所以你的计算逻辑可以正常运行。
• 横屏状态下，绝大多数Android设备会将底部导航栏移动到屏幕左右侧边，仅保留顶部状态栏占用垂直空间，而目前RN Android端的useWindowDimensions()实现不会扣除顶部状态栏的高度，返回的height比应用根View的实际可用高度大了24~28dp（刚好匹配你测试得到的差值），所以你按照返回值计算的top偏移会比实际需要的大，导致View完全隐藏在底部。

你之前排除系统栏影响的猜想不成立，是因为竖屏时系统栏的高度已经被useWindowDimensions()默认扣除，没有出现差值，并不代表系统栏没有占用空间。

是不是RN的Bug #

这个属于RN Android端的已知实现差异，不算严格的功能Bug：useWindowDimensions的设计初衷是返回系统Window层级的尺寸，不同Android ROM的系统栏适配规则差异很大，RN默认实现没有做全场景的inset扣除。

解决方案 #

最优适配方案（推荐） #

不要依赖屏幕高度做绝对定位计算，直接使用bottom属性实现需求，天然适配所有横竖屏、不同设备的系统栏差异：

export default function App() {
  return (
    <View style={{flex: 1}}>
      <View
        style={{
          height: 100,
          width: 100,
          backgroundColor: 'red',
          position: 'absolute',
          bottom: -80, // View总高100，仅露出20，向下偏移80即可
        }}>
      </View>
    </View>
  );
}

需准确获取可用高度的场景 #

如果你的业务逻辑必须拿到应用实际可用的垂直高度，可以选择两种方案：

• 给根View绑定onLayout回调，从回调参数中直接获取根View的实时高度，这个高度和实际绘制区域完全一致
• 引入react-native-safe-area-context库，使用库提供的尺寸获取方法，会自动处理所有系统栏的安全区域适配，返回的高度完全符合预期。

内容的提问来源于stack exchange，提问作者Hector Ricardo