React Native升级后如何查看组件的文件名与行号？

1. 调整React DevTools设置 #

• 打开React DevTools，切到Components标签页
• 点击右上角的齿轮图标，勾选Show component stacks选项
• 选中组件后，右侧面板的Stack区域就会显示对应的文件名和行号

2. 配置Flipper的React Native Inspector插件 #

• 打开Flipper，确保React Native Inspector插件已安装启用
• 进入插件设置，勾选Enable component stack traces
• 重启APP后，选中组件就能在右侧详情面板看到文件路径和行号

3. 确保Metro开启Source Map支持 #

• 打开项目根目录的metro.config.js，确认（或添加）以下配置：

  module.exports = {
    transformer: {
      enableBabelRuntime: true,
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    server: {
      sourceMapPath: '__dirname',
    },
  };
  

• 重启Metro服务，重新打包APP

4. 开启RN调试模式的必要选项 #

• 打开APP调试菜单（iOS按Cmd+D，Android按Cmd+M或Ctrl+M）
• 勾选Debug JS Remotely和Enable Debugging
• 部分版本需检查扩展选项，确保栈追踪功能处于开启状态

5. 适配RN 0.65+的Hermes引擎配置 #

• RN 0.65后默认用Hermes，需确保其source map配置正确
• Android端：打开android/app/build.gradle，确认Hermes配置：

  project.ext.react = [
    enableHermes: true,
    hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermesc",
  ]
  

• iOS端：在Podfile中确认引入Hermes pod，执行pod install

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