React Native Expo热重载未同步源码问题求助

先理清几个容易混淆的更新机制 #

• Fast Refresh：Expo默认启用的更新方式，只增量更新修改的组件、保留状态，但不会同步调试器里的源码文件（因为是局部更新，没有重新拉取整个源码）
• Live Reloading：修改代码后整个App重新加载，会重置组件状态，但调试器源码会同步
• Hot Reloading：旧版React Native的功能，逻辑类似Fast Refresh但兼容性不如后者，现在Expo官方已用Fast Refresh替代

带Expo Router项目的问题解决 #

你碰到的「UI更新但源码不同步」是Fast Refresh的正常行为——它只推送组件的局部更新到设备，不会触发调试器重新加载源码文件。要让源码和UI匹配，有两个办法：

1. 打开Chrome DevTools的自动重载：在Sources面板右上角找到"Auto reload"按钮，开启后调试器会自动同步源码
2. 执行全量重载：在Expo调试菜单里长按「Reload」，选择「Full Reload」，这会强制重新加载整个App，同步源码与UI

无Expo Router空白TS项目的Android端修复 #

你的配置缺了关键步骤，导致Android端Fast Refresh失效，按以下步骤排查：

1. 确保metro.config.js配置正确（没有就新建）：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

module.exports = config;

2. 验证AppEntry.js内容是否正确：

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

3. 重置Android端的Fast Refresh状态：打开调试菜单→关闭「Fast Refresh」→等待3秒后重新开启，缓存问题常导致更新失效
4. 清除Metro缓存：运行npx expo start --clear，彻底清理旧缓存文件

Web端同步UI与源码的原因 #

Web端的Expo基于Metro的Web适配（或Webpack），浏览器调试器本身会监听本地文件变化：当Metro推送更新时，浏览器同时更新DOM和重新加载对应源码文件，所以看起来UI和源码同步。而Native端的调试器通过WebSocket接收调试信息，Fast Refresh的增量更新不会触发源码文件重新加载，只有全量重载才会同步。

如何启用Live Reloading/旧版Hot Reloading #

• Live Reloading：在Expo调试菜单里，先关闭Fast Refresh（两者不能同时启用），然后开启「Live Reload」。开启后修改代码会自动全量重载App，同步源码但丢失组件状态
• 旧版Hot Reloading：部分Expo版本支持长按调试菜单的「Fast Refresh」，选择「Enable Hot Reloading」启用，但官方已不推荐，因为Fast Refresh兼容性和效率更好

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