Expo中设置transparent=true的Modal导致iOS屏幕切换崩溃

问题场景 #

• 基于Expo的React Native项目，使用@react-navigation/native-stack的Stack.Navigator管理页面
• Login页面内嵌了设置transparent={true}的原生Modal，包含登录表单和操作按钮
• 调用Firebase Auth的signInWithEmailAndPassword或signInAnonymously完成认证后，通过onAuthStateChanged监听状态更新，触发Login页面到Inside页面的导航切换
• 仅iOS端出现崩溃，Android无异常
• 已尝试无效方案：切换页面前将Modal的transparent设为false、设置Modal的presentationStyle="formSheet"

可能原因 #

iOS原生透明Modal的动画渲染逻辑与React Navigation的导航栈切换动画存在冲突，当Modal未完全完成关闭动画时，导航栈已开始切换页面，导致Native层视图层级混乱，触发崩溃。

可行解决方案 #

1. 确保Modal完全关闭后再触发导航切换 #

在认证方法中先关闭Modal，等待其关闭动画完成（iOS默认动画时长约300ms）后，再执行Firebase认证逻辑：

// Login.tsx 示例代码
const [modalVisible, setModalVisible] = useState(true);

const signIn = async () => {
  setModalVisible(false);
  // 等待Modal关闭动画结束
  await new Promise(resolve => setTimeout(resolve, 300));
  try {
    await signInWithEmailAndPassword(auth, email, password);
  } catch (error) {
    // 认证失败时重新打开Modal并提示错误
    setModalVisible(true);
    console.error('登录失败:', error);
  }
};

const guestAccess = async () => {
  setModalVisible(false);
  await new Promise(resolve => setTimeout(resolve, 300));
  try {
    await signInAnonymously(auth);
  } catch (error) {
    setModalVisible(true);
    console.error('游客登录失败:', error);
  }
};

2. 替换原生Modal为React Navigation的透明Modal页面 #

放弃原生Modal，改用React Navigation内置的透明Modal导航，让导航栈统一管理视图层级，避免Native层冲突：

// 根导航配置示例
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
      {/* 配置透明Modal页面 */}
      <Stack.Screen
        name="LoginModal"
        component={LoginModalContent}
        options={{
          presentation: 'transparentModal',
          animation: 'slide_from_bottom' // 可选，匹配原生Modal动画
        }}
      />
      <Stack.Screen name="Inside" component={InsideScreen} />
    </Stack.Navigator>
  );
}

在LoginScreen中通过navigation.navigate('LoginModal')打开弹窗，关闭时调用navigation.goBack()，认证完成后直接导航到Inside页面即可。

3. 临时禁用导航切换动画 #

如果以上方案无法快速生效，可临时禁用Inside页面的导航动画，避免动画冲突：

<Stack.Screen
  name="Inside"
  component={InsideScreen}
  options={{ animation: 'none' }}
/>

4. 调整Auth状态监听的时机 #

在App.tsx的onAuthStateChanged回调中延迟更新user状态，确保Modal动画已完成：

// App.tsx 示例代码
const [user, setUser] = useState<User | null>(null);

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (newUser) => {
    // 延迟更新用户状态，等待视图动画稳定
    setTimeout(() => {
      setUser(newUser);
    }, 300);
  });
  return unsubscribe;
}, []);

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