【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器

前端鳄鱼崽2025-10-19 10:07

react native 也能实现点击组件跳转到编辑器了

仓库地址： github.com/winchesHe/r...

效果演示

对于不想花 20 刀一个月买 random-ide 的有福了（我也不想花钱）

用法

一个用于 React Native/Expo 开发阶段的 Inspector 辅助工具：

Babel 插件会在 development 环境为组件注入 __inspectorSource 属性，便于在调试器或自定义逻辑中定位到源码位置。
Metro 中间件集成了打开编辑器的能力（基于 launch-editor），通过 Dev Server 请求快速在本地编辑器中打开对应文件。

babel.config.js

将插件按需注入，仅在 development 环境生效：

js 复制代码

module.exports = function (api) {
  const env = api.env();
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      env === 'development'
        ? [
          require.resolve('react-native-components-inspector/babel/injectInspectorSource'),
          { propName: '__inspectorSource' },
        ]
        : void 0,
    ].filter(Boolean),
  };
};

metro.config.js

为 Metro Dev Server 增强中间件以支持在编辑器中打开文件：

js 复制代码

const { launchEditorMiddleware } = require('react-native-components-inspector/scripts/launchEditorMiddleware');

module.exports = (() => {
  // Attach custom middleware for opening files in editor
  config.server = {
    ...config.server,
    enhanceMiddleware: (middleware) => {
      const launchMw = launchEditorMiddleware();
      return (req, res, next) => launchMw(req, res, () => middleware(req, res, next));
    },
  };

  return config;
})();

提示：上述片段展示了核心接入点；请按你的项目实际导入/获取 config 与 launchEditorMiddleware 的方式完成接入。

根组件包裹 InspectorWrapper（App.tsx）

在应用入口处，用 InspectorWrapper 包裹你的根组件，建议仅在开发环境启用：

tsx 复制代码

import React from 'react';
import { InspectorWrapper } from 'react-native-components-inspector/src/components/InspectorWrapper';
import { Root } from './src/Root';

export default function App() {
  const Wrapper: React.ComponentType<any> = __DEV__ ? InspectorWrapper : React.Fragment;
  return (
    <Wrapper>
      <Root />
    </Wrapper>
  );
}

如果你的项目使用不同的入口（例如 index.js / index.tsx 或 Expo Router 的 app/_layout.tsx），请在相应的根布局处按同样方式包裹。