本地调试 React Native (RN) 组件库代码方式（方式二验证成功）

在本地调试 React Native (RN) 组件库代码是一个常见的开发需求，尤其是在你正在开发或修改一个私有/公共的 RN 组件库时。以下是几种高效且常用的本地调试方法：

---

核心思路

将你正在开发的组件库代码链接（link）到一个真实的 React Native 应用中，这样你对库的修改可以实时反映在应用中，便于调试 UI、交互和逻辑。

---

方法一：使用 npm link / yarn link（经典方法）

这是最传统的方法，适用于大多数场景。

步骤 1：在组件库项目中创建链接

bash

编辑

# 进入你的组件库目录
cd my-rn-component-library

# 构建你的库（如果需要）
# 例如，如果你的库使用 TypeScript，先编译
npm run build

# 创建全局链接
npm link
# 或者使用 yarn
yarn link

步骤 2：在目标 RN 应用中链接库

bash

编辑

# 进入你的 React Native 项目目录
cd my-rn-app

# 链接到本地的组件库
npm link my-rn-component-library
# 或者
yarn link my-rn-component-library

步骤 3：使用组件并调试

在 my-rn-app 的代码中像平常一样导入并使用你的组件：

jsx

编辑

import { MyButton } from 'my-rn-component-library';

// 在 JSX 中使用
<MyButton title="点击我" />

方法一有的项目调试不成功，改用下面的方法

使用脚本修改应用项目中的依赖配置，改为本地依赖，并且备份和修改metro配置，重新安装依赖运行

修改为本地依赖

npm run link:project ../demo/myapp

恢复正式依赖

npm run unlink:project /path/to/your-rn-project

调试技巧

• 热重载：修改组件库代码后，通常 RN 应用的 Fast Refresh 会自动重新加载组件。
• 源码映射：确保你的组件库构建时生成了 Source Map（如 tsc --sourceMap），这样在 React DevTools 或浏览器调试器中可以直接跳转到 .ts 或 .tsx 源文件进行断点调试。

注意事项

• React 版本冲突：如果组件库也安装了 react 和 react-native，可能会导致“多个 React 实例”错误。解决方案：在组件库的 package.json 中将 react 和 react-native 添加到 peerDependencies，并在 devDependencies 中安装它们，但不要在 dependencies 中。
• 符号链接问题：某些工具（如 Metro）可能不支持深层符号链接。可以配置 metro.config.js 来解析符号链接。

---

方法二：使用 npm pack（打包测试）

这种方法更接近真实的发布流程，适合在发布前做最终测试。

步骤 1：在组件库中打包

bash

编辑

cd my-rn-component-library
npm pack
# 会生成一个类似 my-rn-component-library-1.0.0.tgz 的文件

步骤 2：在 RN 应用中安装本地包

bash

编辑

cd my-rn-app
npm install ../my-rn-component-library/my-rn-component-library-1.0.0.tgz
# 或者直接引用路径
npm install ../my-rn-component-library

注意：npm install ../path/to/lib 会自动创建符号链接，效果类似于 npm link。

步骤 3：测试和调试

运行应用进行测试。每次修改库代码后，需要重新 npm pack 和 npm install。

---

方法三：使用 Monorepo 工具（推荐用于复杂项目）

如果你的组件库和应用属于同一个项目，强烈推荐使用 Monorepo 工具，如 Yarn Workspaces 或 npm Workspaces。

示例：Yarn Workspaces 结构

text

编辑

my-monorepo/
├── package.json          # 启用 workspaces
├── packages/
│   ├── component-library/ # 你的 RN 组件库
│   │   └── package.json
│   └── rn-app/           # 你的 RN 应用
│       └── package.json

根目录 package.json

json

编辑

{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

在 rn-app 中使用库

bash

编辑

cd my-monorepo
yarn install

Yarn 会自动处理包之间的依赖和链接。你可以在 rn-app 中直接导入：

jsx

编辑

import { MyButton } from 'component-library';

优点

• 自动链接，无需手动 link。
• 依赖管理更清晰。
• 支持跨包调试，体验最佳。

---

方法四：使用 Example App（组件库内置示例）

在组件库项目中创建一个 example 目录，里面是一个完整的 RN 应用。

结构示例

text

编辑

my-rn-component-library/
├── src/
├── example/           # 内置的 RN 示例应用
│   ├── App.js
│   └── ...
├── package.json
└── ...

步骤

1. 在 example/package.json 中通过 file: 协议引用主库：
   json

   编辑

   "dependencies": {
     "my-rn-component-library": "file:.."
   }

2. 在 example 目录下安装依赖并运行：
   bash

   编辑

   cd example
   npm install
   npx react-native run-android

优点

• 调试环境与库代码紧密集成。
• 方便编写组件文档和示例。
• 是开源 RN 组件库的常见做法（如 react-native-vector-icons）。

---

通用调试技巧

1. React DevTools：使用 React DevTools 检查组件的 props、state 和层级。
2. Chrome Debugger：在 RN 调试菜单中选择 "Debug with Chrome"，在浏览器中调试 JavaScript 代码。
3. 日志输出：在组件库中使用 console.log 输出关键变量。
4. TypeScript：如果使用 TypeScript，确保 tsconfig.json 配置正确，以便获得更好的开发体验。

---

总结

方法	适用场景	推荐度
npm link / yarn link	快速链接到现有项目	⭐⭐⭐⭐
npm pack	发布前的最终测试	⭐⭐⭐
Monorepo (Yarn Workspaces)	组件库和应用属于同一项目	⭐⭐⭐⭐⭐
内置 Example App	开发组件库本身，编写示例	⭐⭐⭐⭐⭐

最佳实践：对于独立开发的组件库，使用 内置 Example App；如果组件库和应用在同一个组织下，优先考虑 Monorepo。