使用expo-screen-orientation锁定单屏方向时清理函数失效求助

问题原因 #

你当前的代码存在两个核心问题：

1. React的useEffect清理函数不会等待异步操作完成——你在清理函数里定义了异步函数unlockOrientation并直接调用，但React不会等待这个异步函数执行完毕，可能组件已经卸载，解锁操作还没完成。
2. 若使用React Navigation等导航库，切换屏幕时组件可能不会立即卸载（比如栈导航下的组件会保留在栈中），此时useEffect的清理函数根本不会触发，导致方向锁一直生效。

解决方案 #

方案1：修正useEffect的异步清理逻辑

确保清理函数中的异步操作被正确执行，同时处理可能的错误：

import { lockAsync, OrientationLock, unlockAsync } from 'expo-screen-orientation';
import { useEffect } from 'react';

// 组件内的useEffect
useEffect(() => {
  const lockOrientation = async () => {
    try {
      await lockAsync(OrientationLock.PORTRAIT);
    } catch (err) {
      console.error('锁定方向失败:', err);
    }
  };

  lockOrientation();

  // 用立即执行的异步函数包裹解锁逻辑
  return () => {
    (async () => {
      try {
        await unlockAsync();
      } catch (err) {
        console.error('解锁方向失败:', err);
      }
    })();
  };
}, []);

注意：React 18支持清理函数返回Promise，但旧版本会触发警告，因此用IIFE（立即执行函数）是更兼容的写法。

方案2：使用导航焦点事件（更可靠）

如果用React Navigation，推荐用useFocusEffect替代useEffect，它会在屏幕获得焦点时锁定方向，失去焦点时自动解锁，不受组件卸载状态影响：

import { useFocusEffect } from '@react-navigation/native';
import { lockAsync, OrientationLock, unlockAsync } from 'expo-screen-orientation';
import React from 'react';

// 组件内的useFocusEffect
useFocusEffect(
  React.useCallback(() => {
    const lock = async () => {
      await lockAsync(OrientationLock.PORTRAIT);
    };
    lock();

    // 失去焦点时解锁
    return async () => {
      await unlockAsync();
    };
  }, [])
);

这个方案是处理单屏幕方向锁定的最优解，因为它完全贴合导航场景的生命周期。

额外排查点

• 检查全局是否有其他地方调用了lockAsync但未解锁，导致方向锁冲突；
• 确认expo-screen-orientation版本是否最新，旧版本可能存在异步API的bug。

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