Expo项目Navigation Container在TestFlight中显示空白屏求助

针对你遇到的Expo生产构建后白屏问题，结合代码和配置分析，给出以下针对性修复步骤：

1. 修复代码语法错误 #

你的App.js末尾return语句存在语法问题：用return({ ... })会返回一个对象而非React元素，生产环境下会直接导致渲染失败。修改为：

return (
  <View style={{flex: 1}}>
    <Text>Something went wrong</Text>
  </View>
);

2. 移除NavigationContainer上的无效style属性 #

NavigationContainer组件不支持style props，该属性会被忽略，可能导致布局异常。将布局样式移至内部容器：

if(!user){
  return (
    <NavigationContainer>
      <View style={{flex: 1}}>
        <Stack.Navigator
          initialRouteName='Welcome'
          screenOptions={{headerShown: false}} // 统一设置隐藏头部，简化代码
        >
          <Stack.Screen name="Welcome" component={Welcome} />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </Stack.Navigator>
      </View>
    </NavigationContainer>
  );
}

3. 排查Firebase Auth生产环境初始化问题 #

生产环境中Firebase Auth监听可能因配置错误或网络问题卡住，导致initializing一直为true，始终返回null。添加错误捕获和超时处理：

function handleAuthStateChanged(user){
  setUser(user);
  if(initializing) setInitializing(false);
}

useEffect(() => {
  const subscriber = firebase.auth().onAuthStateChanged(
    handleAuthStateChanged,
    (error) => {
      console.error("Auth监听错误:", error);
      if(initializing) setInitializing(false); // 出错也终止初始化状态
    }
  );

  // 5秒超时兜底，防止Auth监听卡住
  const timeout = setTimeout(() => {
    if(initializing) setInitializing(false);
  }, 5000);

  return () => {
    subscriber();
    clearTimeout(timeout);
  };
}, []);

同时确认config.js中的Firebase配置在生产环境正确加载，若使用环境变量，需在eas.json的生产构建配置中注入对应变量。

4. 完善React Navigation依赖的Babel配置 #

@react-navigation/drawer依赖react-native-reanimated，生产环境必须在babel.config.js中添加对应插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // 必须放在插件数组最后
  };
};

缺少该插件会导致Reanimated在生产环境失效，引发导航组件渲染失败。

5. 清理缓存并重新构建 #

执行以下命令清理构建缓存，避免旧缓存导致的异常：

eas build:clear-cache
eas build --platform ios

6. 查看生产环境日志定位问题 #

通过Xcode连接设备查看TestFlight应用的控制台日志，或使用expo logs --production查看远程日志，可直接获取白屏的具体错误信息（如依赖缺失、配置错误等），是最精准的排查方式。

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