使用eas build构建的Android APK启动后显示白屏问题求助

1. 修复JSX语法错误 #

代码中headerLeft: () => ,是空箭头函数，属于语法错误，会直接导致组件渲染失败，替换为：

headerLeft: () => <DrawerToggleButton />,

2. 修正闪屏隐藏逻辑 #

原代码中同步调用SplashScreen.hideAsync()存在时机问题，改为在useEffect中异步处理：

// 移除原有同步判断代码
// if (!fontsLoaded) {
//   return undefined;
// } else {
//   SplashScreen.hideAsync();
// }

// 替换为异步处理逻辑
useEffect(() => {
  async function hideSplash() {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }
  hideSplash();
}, [fontsLoaded]);

if (!fontsLoaded) {
  return null;
}

3. 处理异步语言初始化的空值问题 #

retrieveLanguage是异步函数，初始时snap.lang可能未完成赋值，导致titleTexts为undefined，访问属性会静默失败，添加默认值或加载状态：

// 方式1：添加默认兜底值
const titleTexts = data[snap.lang] || data["0"];

// 方式2：添加语言加载状态（更严谨）
import { useState } from "react";

export default function App() {
  const [isLanguageLoaded, setIsLanguageLoaded] = useState(false);
  const snap = useSnapshot(selected);
  const titleTexts = data[snap.lang];

  const retrieveLanguage = async () => {
    try {
      const storedLanguage = await AsyncStorage.getItem("language");
      selected.lang = storedLanguage ?? "0";
    } catch (error) {
      console.error("语言加载失败:", error);
      selected.lang = "0";
    } finally {
      setIsLanguageLoaded(true);
    }
  };

  useEffect(() => {
    retrieveLanguage();
  }, []);

  // 等待字体和语言都加载完成再渲染
  if (!fontsLoaded || !isLanguageLoaded) {
    return null;
  }

  // ... 其余代码
}

4. 确保NavigationContainer正确包裹导航器 #

原代码中缺失NavigationContainer组件，必须用它包裹Drawer.Navigator才能正常渲染导航：

return (
  <NavigationContainer>
    <Drawer.Navigator
      screenOptions={{
        // ... 你的配置项
      }}
    >
      {/* 屏幕定义 */}
    </Drawer.Navigator>
  </NavigationContainer>
);

5. 检查React Native Reanimated配置 #

SDK 49中使用@react-navigation/drawer需要确保react-native-reanimated的babel插件正确配置，修改babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

6. 验证依赖版本兼容性 #

确保以下依赖版本与SDK 49兼容：

• @react-navigation/native: ^6.1.x
• @react-navigation/drawer: ^6.6.x
• react-native-gesture-handler: ^2.12.x
• react-native-reanimated: ^3.3.x

执行依赖更新：

npx expo install @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated

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