# @deltabreen/help-react-native 中文文档

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

版本：0\.1\.1
npm 元数据更新时间：2026-10-31T22:00:09.602Z
中文译文更新时间：2026-10-31T22:56:51.090Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40deltabreen/help-react-native
原文对照：https://npmcn.com/package/%40deltabreen/help-react-native/?lang=original
项目主页：https://help.deltabreen.eu/docs/apps

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

- 包体积（解压后）：20.6 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，react-native \>=0\.70，react-native-webview \>=13
- 首次发布：2026-10-31T16:43:52.699Z
- 最新版本发布：2026-10-31T22:00:09.403Z
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

DeltaBreen为React Native和Expo提供的帮助：应用程序中的帮助台。应用程序屏幕上的支持表单和用户自己的票，登录用户，每部手机的钥匙，以及表单的事件。

## 安装

```sh
npm install @deltabreen/help-react-native
```

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

## README

# DeltaBreen为React Native提供帮助

在你的应用程序中的帮助台：支持表单和用户自己的票，与你的团队的答复，在屏幕上的 React Native或Expo应用程序。它在web视图中显示帮助自己的表单，所以你的应用程序得到我们的修复，而无需发布 ，并将其事件返回给您的代码。

```sh
npx expo install @deltabreen/help-react-native react-native-webview   # an Expo app
npm install @deltabreen/help-react-native react-native-webview         # any other, then: cd ios && pod install
```

## 在你的网站页面上

在你的网站上创建一个页面，只包含表单和用户自己的门票，地址如下 `https://acme.com/app-support` (你的网站的 **安装** TAB有它，用你的键，当网站是 **手机应用程序**）。 然后展示出来：

```jsx
import { HelpScreen } from '@deltabreen/help-react-native'

export function Support({ token }) {
  return <HelpScreen page="https://acme.com/app-support" token={token} style={{ flex: 1 }} onSent={({ number }) => console.log(number)} />
}
```

你的网站的验证域名是什么让你的活键工作，因为它在网站本身。链接到您的网站 留在应用程序中；其他任何东西，比如团队回复中的文件，都会在手机浏览器中打开。

用于添加文件的表单按钮将打开手机自己的选择器。在iPhone上，它提供“拍照”功能，iOS则关闭一个 不用解释原因就能打开摄像头的应用。添加 `NSCameraUsageDescription` 到你的应用程序 `Info.plist`，上面写着 iOS应该在询问时显示；在世博会上 `app.json`：

```json
{ "expo": { "ios": { "infoPlist": { "NSCameraUsageDescription": "To send a photo to support." } } } }
```

## 登录用户

一个用户登录到你的应用程序，不输入他们的电子邮件，就可以看到他们自己的票和你的票 回答。你的 **服务器** 签署一个简短的令牌，说明他们是谁，与您的网站的秘密 （[该指南](https://help.deltabreen.eu/docs/embed#logged-in-users) 有代码)。每次都向服务器请求一个 屏幕打开并将其传递为 `token`;它在脚本运行之前被传递给页面。如果没有，表单将处理 他们作为客人。

## 你的应用程序没有网站

离开 `page` 给出你网站的关键字：屏幕上有页面本身。在门户中，选择 **我的应用没有 网站** 为网站。你的实时密钥对登录到你的应用程序的人有效，如果你打开它，对于 **有人有你的应用吗？**，通过为电话制作的键，第一次支持打开：

```jsx
// npx expo install expo-secure-store expo-crypto
import * as Crypto from 'expo-crypto'
import * as SecureStore from 'expo-secure-store'
import { HelpScreen, useDeviceKey } from '@deltabreen/help-react-native'

export function Support({ token }) {
  const deviceKey = useDeviceKey(SecureStore, Crypto.getRandomBytes)
  return <HelpScreen siteKey="pk_live_…" token={token} deviceKey={token ? undefined : deviceKey} style={{ flex: 1 }} />
}
```

`useDeviceKey` 做一次钥匙，并保存在商店你给它（任何东西） `getItem` 和 `setItem` 作品 太);在它被读取之前，它是空的，屏幕等待它。一部新手机或重新安装的应用程序启动 新鲜。我们建议您通过您自己的服务器登录您的用户，您可以：应用程序中的密钥可以取出 它的，只有登录用户不能被弥补。

没有网站， `show` 选择表单、票证或两者（默认值），和 `lang`， `accent`， `labels`， `subject` 和 `fields` 元素是自己的吗 [嵌入指南](https://help.deltabreen.eu/docs/embed#the-element).

`pageCss` 是你自己的CSS页面，在我们之后：它的背景和类型，并通过其自定义的形式 属性和部件。在另一个屏幕上放一张票， `show="tickets"`：

```jsx
<HelpScreen siteKey="pk_live_…" show="form" pageCss="body { background: #0f1115; color: #e8e8e8 } db-help-form { --dbh-accent: #7c5cff; --dbh-radius: 14px }" />
<HelpScreen siteKey="pk_live_…" show="tickets" pageCss="db-help-tickets::part(ticket-preview) { opacity: .6 }" />
```

## 事件

| 道具 | 当 |
| --- | --- |
| `onSent` | 发送了一条消息： `{ number }` |
| `onError` | 它不可能是： `{ code }` |
| `onReplied` | 他们回答了一张罚单： `{ number }` |
| `onClosed` | 他们标记了一张解决了的罚单： `{ number }` |
| `onRated` | 他们给了1分： `{ number, stars }` |
| `onUnread` | 你的团队有多少回复他们没有读过？ `{ unread }` |
| `onView` | 他们打开的票证，或者列表为空： `{ ticket }` |

在屏幕关闭时告诉人们回复，a [webhook](https://help.deltabreen.eu/docs/api#webhooks) (箴 可以发送应用程序自己的通知。

## 你自己的网页视图

`helpPage({ siteKey, … })` 页面是一个没有网站显示的应用程序吗 `helpScript({ token, deviceKey })` 运行什么 在它的脚本之前：把它们放到你自己的web视图中(`injectedJavaScriptBeforeContentLoaded`)，它的事件到达 作为 `postMessage` JSON和 `deltahelp` 命名。 `webViewProps` 将其他内容传递给我们。

## 常见问题

### @deltabreen/help-react-native 是什么？

DeltaBreen为React Native和Expo提供的帮助：应用程序中的帮助台。应用程序屏幕上的支持表单和用户自己的票，登录用户，每部手机的钥匙，以及表单的事件。

### 如何安装 @deltabreen/help-react-native？

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

### @deltabreen/help-react-native 支持 TypeScript 吗？

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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