Expo ScreenOrientation iOS屏幕切换方向后布局偏移问题

问题详情 #

使用Expo开发的应用中，FullscreenIndicadorScreen页面通过useFocusEffect切换为横屏模式，返回包含标签导航器的Tabs页面后，iOS设备上整个Tabs组件会持续处于左侧偏移状态，触摸任意组件后才恢复正常，Android设备无此异常。

相关代码 #

屏幕方向切换逻辑

useFocusEffect(
    useCallback(() => {
      void ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);

      return () => {
        void ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
      };
    }, [])
  );

导航器代码

function App() {
  return (
    <SafeAreaView className="flex-1 bg-white dark:bg-neutral-950" edges={['top']}>
      <AppStack.Navigator screenOptions={{ headerShown: false }}>
        <AppStack.Screen name="Tabs" component={Tabs} />
        <AppStack.Screen name="FullscreenIndicador" component={FullscreenIndicadorScreen} />
      </AppStack.Navigator>
    </SafeAreaView>
  );
}

解决方案 #

1. 锁定竖屏后强制触发布局重绘 #

在返回竖屏的回调中，等待方向锁定完成后，使用LayoutAnimation强制触发页面布局更新，修复iOS的偏移问题：

import { LayoutAnimation } from 'react-native';
import { ScreenOrientation, useFocusEffect, useCallback } from '@react-navigation/native';

useFocusEffect(
  useCallback(() => {
    void ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);

    return async () => {
      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
      // 触发布局动画，强制iOS重新计算布局
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    };
  }, [])
);

2. 给Tabs组件添加方向监听 #

在Tabs组件中监听屏幕方向变化，当切换回竖屏时主动触发重绘：

import { useLayoutEffect, useState } from 'react';
import { LayoutAnimation } from 'react-native';
import { ScreenOrientation } from 'expo';

function Tabs() {
  const [, setForceUpdate] = useState(0);

  useLayoutEffect(() => {
    const subscription = ScreenOrientation.addOrientationChangeListener((event) => {
      if (event.orientationInfo.orientation === ScreenOrientation.Orientation.PORTRAIT_UP) {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        setForceUpdate(prev => prev + 1);
      }
    });

    return () => subscription.remove();
  }, []);

  // 原Tabs导航器代码
  return (
    <Tab.Navigator>
      {/* 子屏幕内容 */}
    </Tab.Navigator>
  );
}

3. 明确导航器屏幕的方向配置 #

在导航器的屏幕选项中直接指定每个页面支持的方向，避免iOS系统自动布局混淆：

<AppStack.Navigator screenOptions={{ headerShown: false }}>
  <AppStack.Screen 
    name="Tabs" 
    component={Tabs} 
    options={{
      orientation: 'portrait_up' // 强制Tabs页面仅支持竖屏
    }}
  />
  <AppStack.Screen 
    name="FullscreenIndicador" 
    component={FullscreenIndicadorScreen} 
    options={{
      orientation: 'landscape' // 强制该页面支持横屏
    }}
  />
</AppStack.Navigator>

4. 确保方向切换完成后更新状态 #

在返回回调中等待方向锁定成功，再通过状态更新触发组件重绘：

import { useState } from 'react';
import { ScreenOrientation, useFocusEffect, useCallback } from '@react-navigation/native';

useFocusEffect(
  useCallback(() => {
    void ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);

    return async () => {
      const lockResult = await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
      if (lockResult === ScreenOrientation.LockResult.SUCCESS) {
        // 用空状态更新触发重绘
        const [, setForceUpdate] = useState(0);
        setForceUpdate(prev => prev + 1);
      }
    };
  }, [])
);

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