React Native Android设备方向处理问题：页面跳转后旋转异常

看起来你遇到的问题和事件监听器没有被正确注销直接相关，我来帮你拆解原因并给出修复方案：

问题根源 #

你当前的代码中，componentDidUnmount里使用了this.handler.bind(this)来移除监听器，但bind()方法每次调用都会返回一个全新的函数实例。这就导致你在componentDidMount中订阅的this.handler，和移除时传入的函数根本不是同一个——监听器实际上没有被注销！

当你跳转到其他页面后，根组件的方向变化监听器依然在后台运行，一旦设备方向改变，根组件的handler函数就会被触发。如果这个函数里有影响路由状态的逻辑（比如意外重置了导航栈），就会导致页面跳回根组件。

修复方案 #

我们需要确保订阅和移除监听器时使用同一个函数引用，这里有两种简单的实现方式：

方案1：在构造函数中提前绑定handler

class RootComponent extends React.Component {
  constructor(props) {
    super(props);
    // 提前绑定handler，确保整个生命周期中引用一致
    this.handleOrientationChange = this.handleOrientationChange.bind(this);
  }

  componentDidMount() {
    Dimensions.addEventListener("change", this.handleOrientationChange);
  }

  componentDidUnmount() {
    // 使用提前绑定好的函数引用移除监听器
    Dimensions.removeEventListener("change", this.handleOrientationChange);
  }

  handleOrientationChange({ window }) {
    // 你的方向变化处理逻辑
    console.log("屏幕尺寸变化:", window.width, window.height);
  }
}

方案2：使用箭头函数定义handler（更简洁推荐）

箭头函数会自动绑定当前组件的this，而且函数引用在组件生命周期中是固定的：

class RootComponent extends React.Component {
  componentDidMount() {
    Dimensions.addEventListener("change", this.handleOrientationChange);
  }

  componentDidUnmount() {
    Dimensions.removeEventListener("change", this.handleOrientationChange);
  }

  // 箭头函数自动绑定this，引用固定
  handleOrientationChange = ({ window }) => {
    // 你的方向变化处理逻辑
    console.log("屏幕尺寸变化:", window.width, window.height);
  };
}

额外建议 #

1. 检查你的handler函数内部逻辑，确保没有误写导航栈重置、强制跳转根页面的代码；如果需要在方向变化时调整布局，只做UI相关的修改即可。
2. 如果你用的是React Navigation，推荐用useFocusEffect来管理监听器，只在页面聚焦时订阅，失焦时自动注销，避免组件卸载后监听器残留：

import { useFocusEffect } from '@react-navigation/native';
import { Dimensions } from 'react-native';

function RootScreen() {
  useFocusEffect(
    React.useCallback(() => {
      const handleOrientation = ({ window }) => {
        // 方向变化处理逻辑
      };
      Dimensions.addEventListener("change", handleOrientation);

      // 页面失焦时执行清理
      return () => Dimensions.removeEventListener("change", handleOrientation);
    }, [])
  );

  return (
    // 页面内容
  );
}

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