React Native函数组件如何检测屏幕方向变化实现横竖屏布局适配

问题原因 #

• 你没有为height、width变量添加let/const声明，JS严格模式下会直接抛出引用错误，非严格模式下也会因为变量未初始化拿到undefined值，导致判断条件失效
• Dimensions.get('window')为静态取值方法，仅会在App初始化时获取一次屏幕尺寸，后续横竖屏切换不会自动更新数值，无法实现布局动态切换
• 你当前使用的renderButtons = () => {}是类组件的方法定义语法，在函数组件中使用会报错

修复步骤 #

1. 导入官方尺寸监听钩子 #

React Native 0.61+ 版本提供了useWindowDimensions钩子，可以自动监听屏幕尺寸变化，横竖屏切换时会自动触发组件重渲染，不用手动监听事件：

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

2. 在函数组件顶部获取实时宽高 #

// 和其他Hook一起放在函数组件最外层作用域
const { height, width } = useWindowDimensions();

3. 改写renderButtons逻辑 #

const renderButtons = () => {
  // 竖屏状态
  if (height > width) {
    return buttons.map((buttonRows, index) => {
      const rowItem = buttonRows.map((buttonItems, buttonIndex) => {
        return <InputButton
          value={buttonItems}
          handleOnPress={() => handleInput(buttonItems)}
          key={`btn-${buttonIndex}`}
        />
      });
      return <View style={styles.inputRow} key={`row-${index}`}>{rowItem}</View>
    });
  // 横屏状态
  } else {
    return buttons_landscape.map((buttonRows, index) => {
      const rowItem = buttonRows.map((buttonItems, buttonIndex) => {
        return <InputButton
          value={buttonItems}
          handleOnPress={() => handleInput(buttonItems)}
          key={`btn-${buttonIndex}`}
        />
      });
      return <View style={styles.inputRow} key={`row-${index}`}>{rowItem}</View>
    });
  }
}

额外注意事项 #

如果你的App没有开启横竖屏切换权限，需要手动配置原生端：

• iOS端：修改项目info.plist文件，在Supported interface orientations项下添加需要支持的横竖屏类型
• Android端：修改AndroidManifest.xml中对应Activity的android:screenOrientation属性为unspecified或者fullSensor

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