React Native启动屏后白屏，仅保存项目文件触发热重载后可正常加载

你遇到的现象是典型的开发模式下模块初始化顺序异常问题，你贴出的react-native-maps循环依赖警告是第三方包的已知问题，多数情况下不会直接触发崩溃，但全量重载时循环依赖会导致模块导出值未初始化，热重载时模块已经完成初始化就不会出现该问题，刚好匹配你描述的故障特征。

你可以按以下顺序排查：

1. 优先清理所有缓存 #

全量重载异常、热重载正常大概率和Metro缓存异常有关，先执行以下操作重置缓存：

• 停止当前运行的Metro服务，执行命令重启：npx react-native start --reset-cache
• 清理原生端构建缓存：
  • 安卓端：删除android/.gradle、android/app/build文件夹后重新执行npx react-native run-android
  • iOS端：执行cd ios && xcodebuild clean && rm -rf ~/Library/Developer/Xcode/DerivedData && pod install后重新运行项目

2. 检查启动逻辑异步依赖 #

如果清理缓存后问题仍存在，排查启动流程中的异步调用：

• 确认启动屏隐藏逻辑是否绑定了未捕获异常的异步回调，全量重载时回调卡住导致启动屏关闭后没有渲染页面内容，热重载时复用了之前的异步执行结果触发了隐藏回调
• 检查有没有在顶层作用域直接调用依赖异步结果的代码，比如全局状态初始值、全局配置依赖原生模块返回值或异步请求结果，全量重载时拿到的是未初始化的undefined，没有抛出可见错误导致页面没有渲染内容

3. 调整react-native-maps引入方式 #

如果你的启动页/首页直接用到了react-native-maps组件，调整引入方式为懒加载，规避循环依赖导致的未初始化问题：

import React, { Suspense } from 'react';
// 替换原有的直接import写法
const MapView = React.lazy(() => import('react-native-maps').then(mod => ({default: mod.MapView})));

// 组件内使用时外层包裹Suspense
function YourComponent() {
  return (
    <Suspense fallback={<></>}>
      <MapView />
    </Suspense>
  )
}

4. 检查Babel/Metro自定义配置 #

如果你近期修改过babel.config.js或者metro.config.js，先将配置还原为项目初始化的默认值，排查是不是别名配置、模块解析规则异常导致全量重载时模块加载失败。

内容的提问来源于stack exchange，提问作者Jake Giles-Phillips