# @dynamic-labs-sdk/react-native-captcha 中文文档

规范地址：https://npmcn.com/package/%40dynamic-labs-sdk/react-native-captcha/

版本：1\.51\.0
npm 元数据更新时间：2026-11-10T18:06:35.217Z
中文译文更新时间：2026-11-13T02:25:48.428Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40dynamic-labs-sdk/react-native-captcha
原文对照：https://npmcn.com/package/%40dynamic-labs-sdk/react-native-captcha/?lang=original

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

- 包体积（解压后）：898 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-native \>=0\.73\.6，react-native-webview \>=13\.0\.0
- 首次发布：2026-08-07T19:21:28.556Z
- 最新版本发布：2026-11-10T18:06:35.053Z
- 近 30 天下载量：2826（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：44（近 12 个月 44 个）

## 中文简介

Captcha 对使用 Dynamic 的 React 本地应用程序的部件进行挑战 .

## 安装

```sh
npm install @dynamic-labs-sdk/react-native-captcha
```

也可以使用：`pnpm add @dynamic-labs-sdk/react-native-captcha`、`yarn add @dynamic-labs-sdk/react-native-captcha`、`bun add @dynamic-labs-sdk/react-native-captcha`

## README

# @ 力学- labs- sdk/ 反应- native- captcha

Captcha 对使用 Dynamic 的 React 本地应用程序的部件进行挑战 .

提供自成一体 `HCaptchaChallenge` 财务报告和审定财务报表 `TurnstileChallenge` 组件使其提供者的部件在 `react-native-webview` 并将卡布查的标志还给Message后桥 将标志递给 `@dynamic-labs-sdk/client`是因为 `setCaptchaToken` 之前的签入方法 需要captcha.

## 安装

```bash
pnpm add @dynamic-labs-sdk/react-native-captcha
```

要求数 `@dynamic-labs-sdk/client` 财务报告和审定财务报表 `react-native-webview`。 。 。 .

## 使用量

读取活动提供者和站点密钥 `getCaptchaSettings`,然后生成匹配的挑战组件.

```tsx
import { useState } from 'react';
import { View, Button } from 'react-native';
import { CaptchaProviderEnum, getCaptchaSettings, setCaptchaToken } from '@dynamic-labs-sdk/client';
import { HCaptchaChallenge, TurnstileChallenge } from '@dynamic-labs-sdk/react-native-captcha';

function SignInScreen() {
  const [captchaReady, setCaptchaReady] = useState(false);
  const settings = getCaptchaSettings();
  const siteKey = settings?.siteKey;

  const handleSignIn = async () => {
    // sendEmailOTP, auth.wallet.connect, etc.
  };

  if (!settings || !siteKey) {
    return <Button title="Sign in" onPress={handleSignIn} />;
  }

  const handleToken = (token: string) => {
    setCaptchaToken({ captchaToken: token });
    setCaptchaReady(true);
  };

  const Challenge =
    settings.provider === CaptchaProviderEnum.Hcaptcha
      ? HCaptchaChallenge
      : TurnstileChallenge;

  return (
    <View>
      <Challenge
        baseUrl="https://your-whitelisted-origin.com"
        siteKey={siteKey}
        onToken={handleToken}
        onError={(error) => console.error(error.message)}
      />
      <Button title="Sign in" disabled={!captchaReady} onPress={handleSignIn} />
    </View>
  );
}
```

这个 `baseUrl` 道具是部件文档的源头。 hCaptcha 和 Turnstile 站点密钥只渲染出白名单主机名, 因此将其设定为您添加到提供者站点配置中的域 .

## 构成部分

| 构成部分 | 提供者 |
| --- | --- |
| `HCaptchaChallenge` | h 卡普察语Name |
| `TurnstileChallenge` | 云花花转弯 |

两个部分都接受 `baseUrl`, (中文(简体) ), `siteKey`, (中文(简体) ), `onToken`, (中文(简体) ), `onError`,可选 `style` 道具 (英语). `onToken` 当用户解决挑战时放出一次; `onError` 在挑战错误、 令牌过期 或 WebView 负载失败时放出一次 。 返回错误被键入( R)`HCaptchaError` 编号 : `TurnstileError`这样你就可以在 `error instanceof HCaptchaError` 或检查 `error.message`。 。 。 .

使用 `style` 覆盖默认高度、边框半径或其他容器样式的道具,以匹配应用程序的设计.

## 重试挑战

`onToken` 财务报告和审定财务报表 `onError` 每个安装部件最多一次起火。 如果您需要让用户在挑战错误或令牌过期后重试, 请卸载并重载组件, 例如通过递增反应 `key`数字 :

```tsx
const [attemptKey, setAttemptKey] = useState(0);

<Challenge
  key={attemptKey}
  baseUrl="https://your-whitelisted-origin.com"
  siteKey={siteKey}
  onToken={handleToken}
  onError={(error) => {
    console.error(error.message);
    setAttemptKey((k) => k + 1);
  }}
/>
```

## 常见问题

### @dynamic-labs-sdk/react-native-captcha 是什么？

Captcha 对使用 Dynamic 的 React 本地应用程序的部件进行挑战 \.

### 如何安装 @dynamic-labs-sdk/react-native-captcha？

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

### @dynamic-labs-sdk/react-native-captcha 支持 TypeScript 吗？

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

### @dynamic-labs-sdk/react-native-captcha 支持 ESM 还是 CommonJS？

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

### @dynamic-labs-sdk/react-native-captcha 可以商用吗？

@dynamic-labs-sdk/react-native-captcha 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @dynamic-labs-sdk/react-native-captcha 的下载量有多少？

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

### @dynamic-labs-sdk/react-native-captcha 还在维护吗？

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