# @eddydesk/react-native 中文文档

规范地址：https://npmcn.com/package/%40eddydesk/react-native/

版本：0\.14\.9
npm 元数据更新时间：2026-09-26T17:46:17.622Z
中文译文更新时间：2026-11-13T06:26:24.371Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eddydesk/react-native
原文对照：https://npmcn.com/package/%40eddydesk/react-native/?lang=original
项目主页：https://github.com/Bear-Eddy/eddydesk#readme
源码仓库：https://github.com/Bear-Eddy/eddydesk

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.8 MB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-native \>=0\.70\.0，react-native-view-shot \>=3\.0\.0，react-native-image-picker \>=5\.0\.0
- 首次发布：2026-04-30T19:16:50.042Z
- 最新版本发布：2026-09-26T17:46:17.468Z
- 近 30 天下载量：4516（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

EddyDesk 移动应用程序的本地组件

## 安装

```sh
npm install @eddydesk/react-native
```

也可以使用：`pnpm add @eddydesk/react-native`、`yarn add @eddydesk/react-native`、`bun add @eddydesk/react-native`

## README

# @ eddydesk/ react-native (英语)

EddyDesk QA 元件用于 React Industrial 移动应用程序 。 具有一个基于导航-上ack的UI的功能,有10个专用屏幕,用于测试,错误报告,信息传递和配置管理.

## 安装

```bash
npm install @eddydesk/react-native @eddydesk/core
# or
yarn add @eddydesk/react-native @eddydesk/core
```

### 可选:图像附件

对于错误报告和信件中的图像附件 :

```bash
npm install react-native-image-picker
```

这是一个可选的对等依赖——部件没有它就能工作,但不会显示取相器按钮.

## 快速启动

```tsx
import { EddyDeskProvider, EddyDeskButton } from '@eddydesk/react-native';

function App() {
  return (
    <EddyDeskProvider
      config={{
        projectId: 'your-project-id',
        dashboardUrl: 'https://app.eddydesk.ai',
        getCurrentUser: async () => ({
          id: user.id,
          email: user.email,
          name: user.name, // Optional, shown on reports
        }),
      }}
    >
      <YourApp />
      <EddyDeskButton position="bottom-right" />
    </EddyDeskProvider>
  );
}
```

## 配置选项

```tsx
<EddyDeskProvider
  config={{
    // Required
    projectId: 'your-project-id',
    getCurrentUser: async () => ({ id: user.id, email: user.email }),

    // Optional — rich context for bug reports
    getAppContext: () => ({
      currentRoute: currentScreenName,           // Current screen name
      userRole: currentUser?.role,                // 'owner', 'manager', 'guest', etc.
      propertyId: selectedProperty?.id,           // App-specific context
      custom: { theme: 'dark' },                 // Any additional data
    }),

    // Optional — callbacks
    dashboardUrl: 'https://app.eddydesk.ai',              // Web dashboard link in widget
    onNavigate: (route) => navigation.navigate(route),   // Deep link handler for test cases
    onReportSubmitted: (report) => { ... },               // After report submission
    getNavigationHistory: () => [...recentScreens],       // Custom nav tracking

    // Optional — self-hosted
    supabaseUrl: '...',
    supabaseAnonKey: '...',
  }}
  enabled={isAuthReady} // Delay init until auth is ready (default: true)
>
```

### 为什么用 `getAppContext`? 吗?

当测试者报告出错误时,EddyDesk会将应用上下文附在报告上. 这告诉开发者修复错误:

-   **哪个屏幕** 窃听器打开了
-   **什么样的角色** 用户有( 对角色依赖错误至关重要)
-   **App 特定状态** 如所选属性、活动过滤器等.

错误报告表还包括一个 **"哪个屏幕?"** 字段,测试者可以手动指定受影响的屏幕.

## 自动上下文抓取

EddyDesk Provider 自动捕获零配置的调试上下文 :

| 数据 | 细节 |
| --- | --- |
| **控制台日志** | 倒数 50 `console.log/warn/error/info` 电话 |
| **网络请求** | 最后20个 `fetch()` 有方法、 URL、 状态、 持续时间的呼叫 |
| **失败的应对机构** | 4xx/5xxx响应机构的首个500个字符 |
| **业绩** | 页面加载时间、内存使用 |
| **环境** | 语言、时区、在线状态 |

此数据附于每一份错误报告并提供给 MCP 服务器 `get_report_context` 用于AI辅助调试的工具.

> **说明:** 对于 React 本地语, 导航历史没有自动抓取( 否) `pushState`) (中文(简体) ). 使用 `getNavigationHistory` 或反向导航集成下面用于屏幕跟踪.

## 导航跟踪

### React 导航集成

```tsx
import { useNavigationContainerRef } from '@react-navigation/native';

function App() {
  const navigationRef = useNavigationContainerRef();
  const routeHistory = useRef<string[]>([]);

  return (
    <EddyDeskProvider
      config={{
        projectId: 'your-project-id',
        getCurrentUser: async () => ({ id: user.id, email: user.email }),
        getNavigationHistory: () => routeHistory.current,
        getAppContext: () => ({
          currentRoute: navigationRef.getCurrentRoute()?.name || 'unknown',
          userRole: currentUser?.role,
        }),
      }}
    >
      <NavigationContainer
        ref={navigationRef}
        onStateChange={() => {
          const name = navigationRef.getCurrentRoute()?.name;
          if (name) {
            routeHistory.current.push(name);
            // Keep last 20
            if (routeHistory.current.length > 20) routeHistory.current.shift();
          }
        }}
      >
        {/* Your navigation */}
      </NavigationContainer>
      <EddyDeskButton />
    </EddyDeskProvider>
  );
}
```

## 部件结构

部件使用12个屏幕的导航堆栈模式:

| 屏幕 | 目的 |
| --- | --- |
| **内容** | 智能英雄横幅+2x2动作网格+发行跟踪卡(打开,完成,再打开)+进度栏 |
| **测试列表** | 所有带有过滤标签( All, To Do, Done, Re Opened) 和彩色状态徽章的任务 |
| **测试细节** | 通过/失败/滑雪动作一次性执行 |
| **测试反馈** | 星标+通过/失败后的质量旗帜 |
| **报告** | Bug/feedback 提交内容包括类型、严重程度、描述、受影响的屏幕 |
| **报告成功情况** | 自动返回家中确认 |
| **议题清单** | 按类别过滤的问题(开放/处理/重新开放),并附有严重程度指标 |
| **问题详情** | 附有验证证明和原始错误上下文的完整发行细节 |
| **信件列表** | 带未读徽章的线索列表 + 作曲按钮 |
| **线索细节** | 聊天泡+回复作曲家 |
| **撰写信件** | 带有主题 + 消息的新线程格式 |
| **简介** | 测试者信息、统计和可编辑字段 |

## 按钮配置

EddyDesk 按钮在默认情况下可被拖动,并带有边角抓取行为:

```tsx
<EddyDeskButton
  draggable={true}           // Enable/disable dragging (default: true)
  position="bottom-right"    // Initial position: 'bottom-right' | 'bottom-left'
  initialX={100}             // Custom initial X position (optional)
  initialY={500}             // Custom initial Y position (optional)
  minY={100}                 // Minimum Y from top (default: 100)
  maxYOffset={160}           // Max Y offset from bottom (default: 160)
/>
```

按钮在发布时会自动向最接近的屏幕边缘快取.

## Monorepo 设置

当在单列波中使用EddyDesk(例如有Turborepo,Nx,或Yarn Workspaces)时,可能会遇到重复实例错误,如:

-   "无效的钩子呼叫"
-   无法读取“ 无效状态” 的财产
-   "只有函数组件的正体内部 才能叫Hooks"

当Metro( React Industrial 的捆绑器)从不同处取出不同的 React 实例时会发生这种情况 `node_modules` 文件夹.

### Fix: 配置 Metro 以使用单个反应实例

更新您的 `metro.config.js` 在 React 本地应用程序中:

```javascript
const path = require('path');
const { getDefaultConfig } = require('@react-native/metro-config');

// Get the monorepo root (adjust path as needed)
const monorepoRoot = path.resolve(__dirname, '../..');

const config = getDefaultConfig(__dirname);

// Block React from monorepo root to prevent duplicates
config.resolver.blockList = [
  ...(config.resolver.blockList || []),
  new RegExp(`${monorepoRoot}/node_modules/react/.*`),
  new RegExp(`${monorepoRoot}/node_modules/react-native/.*`),
];

// Ensure Metro uses the app's React instance
config.resolver.extraNodeModules = {
  react: path.resolve(__dirname, 'node_modules/react'),
  'react-native': path.resolve(__dirname, 'node_modules/react-native'),
};

// Watch the monorepo packages
config.watchFolders = [
  monorepoRoot,
];

module.exports = config;
```

### 替代品:Yarn/npm 工作空间升起

如果您正在使用Yarn工作空间,您也可以配置起重机,以确保单个回放版本:

```json
// package.json (workspace root)
{
  "workspaces": {
    "packages": ["apps/*", "packages/*"],
    "nohoist": [
      "**/react-native",
      "**/react-native/**"
    ]
  }
}
```

## 解决问题

### 未显示部件

1.  确保当前用户的电子邮件在EddyDesk仪表板上注册为测试器
2.  为您的工程启用了 QA 模式
3.  检查 `getCurrentUser` 返回有效的电子邮件

### Supabase连接问题

如果您使用自己的Supabase实例,请提供证书:

```tsx
<EddyDeskProvider
  config={{
    projectId: 'your-project-id',
    supabaseUrl: 'https://your-instance.supabase.co',
    supabaseAnonKey: 'your-anon-key',
    getCurrentUser: async () => ({ id: user.id, email: user.email }),
  }}
>
```

## 已知的限制

### 隐藏在模式后面的按钮

EddyDesk 按钮使用绝对定位在正常 React Native 视图分层中制作. 当您的应用程序显示模式,底页,或键盘时,按钮可能隐藏在后方.

**工作范围:**

-   接受模式打开时按钮无法访问
-   考虑放弃进入EddyDesk的方式
-   对于涉及模式的测试流程,提供触发 EddyDesk 部件的替代方式

## 许可证

麻省理工学院

## 常见问题

### @eddydesk/react-native 是什么？

EddyDesk 移动应用程序的本地组件

### 如何安装 @eddydesk/react-native？

在项目目录运行 npm install @eddydesk/react-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-native（\>=0\.70\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eddydesk/react-native 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eddydesk/react-native 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @eddydesk/react-native 可以商用吗？

@eddydesk/react-native 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @eddydesk/react-native 的下载量有多少？

根据 npm 官方下载统计，@eddydesk/react-native 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,516 次，日均约 151 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eddydesk/react-native 还在维护吗？

最新版本 0\.14\.9 发布于 2026/09/27（1 个月前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/05/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。