React Native Dimensions在设备旋转时无法正常更新的问题求解

• 原生配置遗漏：Android端未在AndroidManifest.xml的主入口Activity节点声明支持旋转、未配置正确的configChanges参数，旋转时系统不会向RN侧推送尺寸变更信号，甚至直接锁定方向不响应旋转操作。
• 静态缓存尺寸值：将Dimensions.get('window')的结果存在模块顶层变量、全局常量或StyleSheet.create中，这类代码只会在应用首次加载时获取一次数值，不会随旋转刷新。
• 未触发组件重渲染：哪怕每次渲染时手动调用Dimensions.get('window')，如果没有订阅尺寸变化事件触发组件状态更新，旋转操作不会带动渲染流程重新执行，拿到的仍是上次渲染时的旧值。
• 模拟器测试操作错误：大部分Android Studio模拟器的窗口边角拉伸操作，属于窗口尺寸缩放，不会触发传感器层面的设备方向变更信号，自然不会推送旋转事件。

通用前置排查项（类/函数组件通用） #

• 确认模拟器旋转功能正常：打开模拟器的扩展控制面板，进入传感器选项手动切换设备方向，或使用快捷键Ctrl+F11触发真实方向变更，不要直接拖动模拟器窗口边角模拟旋转。
• 核对Android原生配置：打开android/app/src/main/AndroidManifest.xml，定位主入口Activity节点：
  • 移除固定方向的android:screenOrientation配置
  • 确保android:configChanges属性包含orientation|screenSize|smallestScreenSize|keyboardHidden参数，配置修改后需重新编译原生安装包，仅重载JS代码不生效
• 禁止静态缓存尺寸值，以下写法完全错误：

  // 模块加载时即固定取值，不会随旋转更新
  const staticWidth = Dimensions.get('window').width
  const styles = StyleSheet.create({
    container: { width: staticWidth }
  })
  

类组件适配方案 #

由于useWindowDimensions是React Hook，无法在类组件中直接使用，可通过手动订阅Dimensions事件实现尺寸响应：

import { Dimensions, Component } from 'react-native'

class ResponsiveView extends Component {
  state = {
    // 初始化时先获取一次当前窗口尺寸
    currentWindow: Dimensions.get('window')
  }

  componentDidMount() {
    // 订阅尺寸变化事件，回调中更新state触发重渲染
    this.sizeChangeListener = Dimensions.addEventListener('change', ({window}) => {
      this.setState({ currentWindow: window })
    })
  }

  componentWillUnmount() {
    // 组件卸载时解绑事件，避免内存泄漏
    this.sizeChangeListener?.remove()
  }

  render() {
    // 直接从state读取最新宽高，配合内联样式即可实现自适应
    const { width, height } = this.state.currentWindow
    return <View style={{ width, height: height * 0.5 }} />
  }
}

注意RN 0.65+版本中，Dimensions返回的window字段才是应用可用的窗口尺寸，不要使用已废弃的screen字段，避免折叠屏、分屏场景下取到错误值。

函数组件使用useWindowDimensions仍不生效的排查方向 #

• 检查是否存在二次缓存：不要使用空依赖的useMemo、useState将hook返回的宽高永久缓存，这类写法会固化首次渲染的尺寸值。
• 确认RN版本不低于0.62，更早版本的useWindowDimensions存在事件订阅缺陷，旋转时无法触发更新。
• 排查第三方导航库拦截问题：旧版本React Navigation可能会拦截系统配置变更事件，导致RN层收不到旋转通知，升级导航库至正式稳定版即可解决。
• 旧系统分屏/折叠屏场景可补兜底逻辑：在useEffect中手动订阅Dimensions变化事件，触发强制更新，弥补hook内置逻辑的兼容性问题。

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga