# @crossmint/client-sdk-react-native-ui 中文文档

规范地址：https://npmcn.com/package/%40crossmint/client-sdk-react-native-ui/

版本：2\.1\.7
npm 元数据更新时间：2026-11-10T15:55:05.211Z
中文译文更新时间：2026-11-11T01:38:59.883Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：276 kB，317 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：expo ^58\.0\.0，react \>=17\.0\.2，expo-device ^58\.0\.0，react-native \>=0\.74\.3，expo-constants ^58\.0\.0，@solana/web3\.js ^1\.98\.1，expo-web-browser ^58\.0\.0，expo-secure-store ^58\.0\.0，react-native-passkey \>=3\.0\.0，react-native-webview ^14\.0\.1，react-native-get-random-values \>=1\.11\.0 \<3
- 首次发布：2025-04-02T21:44:32.122Z
- 最新版本发布：2026-11-10T15:55:03.929Z
- 近 30 天下载量：71840（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：205（近 12 个月 101 个）

## 中文简介

反应原生 SDK 集成 [十字薄荷钱包](https://docs.crossmint.com/) 输入您的移动应用程序。 提供供应商、钩子和内置UI,用于钱包的创建、签名和检察官办公室的核查.

## 安装

```sh
npm install @crossmint/client-sdk-react-native-ui
```

也可以使用：`pnpm add @crossmint/client-sdk-react-native-ui`、`yarn add @crossmint/client-sdk-react-native-ui`、`bun add @crossmint/client-sdk-react-native-ui`

## README

# @crossmint/client-sdk-resact-native-ui (英语)

反应原生 SDK 集成 [十字薄荷钱包](https://docs.crossmint.com/) 输入您的移动应用程序。 提供供应商、钩子和内置UI,用于钱包的创建、签名和检察官办公室的核查.

## 先决条件

获取一个 **客户端** API 密钥从 [Crossmint 开发器控制台](https://docs.crossmint.com/introduction/platform/api-keys)。确保您的键有 **钱包 API** 启用范围,包括 `wallets.fund` 页:1 `stagingFund`。 。 。 .

## 安装

```bash
npx expo install @crossmint/client-sdk-react-native-ui expo-constants expo-device expo-secure-store expo-web-browser react-native-get-random-values react-native-webview
```

SDK需要Expo SDK 58(反应原生地0.88,iOS 16.4或更后). 本地模块是同伴依赖,以及 `npx expo install` 选择匹配您的 Expo SDK 的版本.

### Xcode 27 和 iOS 27 代码

使用Xcode 27 (iOS 27 SDK)构建的App必须使用UIKit场景生命周期. 如果他们不这样做,它们就会以"用这个SDK制造的应用软件需要UIScene生命周期"来停止发射. Expo SDK 58生成: `npx expo prebuild` 添加a `SceneDelegate.swift` 和场景显示 `Info.plist`。不需要配置, Crossmint 配置插件也与之配合.

升级到世博会SDK 58后,再生原生项目. 如果你的应用程序生成 `ios/` 财务报告和审定财务报表 `android/` (连续土著一代),运行 `npx expo prebuild --clean`如果你手持这些文件夹, `--clean` 删除您的修改; 将场景生命周期的修改应用到您的 AppDelegate 和 Info.plist 中, 如您所描述的那样 [博览会iOS场景生命周期指南](https://expo.fyi/ios-scene-lifecycle)。 。 。 .

如果你的应用程序配置仍然设置 `ios.enableSceneSupport` 内 `expo-build-properties`,你可以删除它。 它对世博会SDK 58.

## 快速启动

### 1\. 设置供应商

**带有 Crossmint Auth( 运行中的默认)**

```tsx
import {
  CrossmintProvider,
  CrossmintAuthProvider,
  CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      <CrossmintAuthProvider>
        <CrossmintWalletProvider
          createOnLogin={{
            chain: "base-sepolia",
            recoveryMethods: [{ type: "email" }],
          }}
        >
          <MainApp />
        </CrossmintWalletProvider>
      </CrossmintAuthProvider>
    </CrossmintProvider>
  );
}
```

**带来您自己的认证**

当您的应用程序已经拥有认证提供者时使用, 并在生产中: 连接您的提供者并配置 [JWT 认证](https://docs.crossmint.com/introduction/platform/api-keys/jwt-authentication) 在 Crossmint 控制台(参见 [移动到生产](https://docs.crossmint.com/wallets/guides/crossmint-auth#move-to-production)) (中文(简体) ). 那就跳过 `CrossmintAuthProvider` 把你的供应商的JWT传给钱包SDK 见 [自定义认证指南](https://docs.crossmint.com/wallets/guides/bring-your-own-auth#react-native) 详细情况.

```tsx
import {
  CrossmintProvider,
  CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-native-ui";

export default function App() {
  return (
    <CrossmintProvider apiKey={process.env.EXPO_PUBLIC_CROSSMINT_API_KEY}>
      <CrossmintWalletProvider
        createOnLogin={{
          chain: "base-sepolia",
          recoveryMethods: [
            {
              type: "email",
              email: "user@example.com",
            },
          ],
        }}
      >
        <MainApp />
      </CrossmintWalletProvider>
    </CrossmintProvider>
  );
}
```

### 2\. 使用钱包

```tsx
import { useWallet } from "@crossmint/client-sdk-react-native-ui";
import { View, Text, TouchableOpacity } from "react-native";

function WalletActions() {
  const { wallet, status } = useWallet();

  if (status === "in-progress") return <Text>Loading wallet...</Text>;
  if (!wallet) return <Text>No wallet</Text>;

  // Staging only: mints USDXM, Crossmint's test stablecoin, into the wallet
  const handleFund = async () => {
    await wallet.stagingFund(10);
  };

  const handleSend = async () => {
    const tx = await wallet.send("0xRecipient", "usdxm", "10");
    console.log("Transaction:", tx.explorerLink);
  };

  return (
    <View>
      <Text>Wallet: {wallet.address}</Text>
      <TouchableOpacity onPress={handleFund}>
        <Text>Get 10 USDXM</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={handleSend}>
        <Text>Send 10 USDXM</Text>
      </TouchableOpacity>
    </View>
  );
}
```

## 供应商

| 提供者 | 目的 |
| --- | --- |
| `CrossmintProvider` | 根供养. 需要所有 Crossmint 特性 . |
| `CrossmintAuthProvider` | 认证 (OAuth). 如果使用自己的认证可以选择 . |
| `CrossmintWalletProvider` | 钱包的创建,设备签名管理,以及OTP UI. |

### `CrossmintWalletProvider` 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `createOnLogin` | `CreateOnLogin` | —— 说 | Auth 上自动创建钱包 。 用途 `recovery` 或者说 `recoveryMethods` + 可选 `signers`。 。 。 . |
| `showOtpSignerPrompt` | `boolean` | `true` | 何时 `true` (默认), 内置的 OTP 对话框在签名流程中显示 。 设定为 `false` 并手动通过 `useWalletOtpSigner()`。 。 。 . |
| `deviceSignerKeyStorage` | `DeviceSignerKeyStorage` | —— 说 | 覆盖默认本地密钥存储 . |
| `passkeys` | `NativePasskeyConfig` | —— 说 | 在每个链上启用密码签名符 : `{ rpId, rpName?, passkey: Passkey }`,与 `Passkey` 从 `react-native-passkey`。需要与 `rpId` (监督厅) `webcredentials:` 相关域名,Android Digital Asset Links)和一个开发构建,因为Expo Go无法运行本地模块. 保留 `rpId` 一旦用户创建了密码就固定了。 没有这种道具,便拒绝使用密码签名. |
| `appearance` | `UIConfig` | —— 说 | 用于内置UI组件的造型. |

## 钩子

### `useWallet()`

返回钱包实例和管理功能 :

```tsx
const {
  wallet,              // Wallet | undefined
  status,              // "not-loaded" | "in-progress" | "loaded" | "error"
  getWallet,           // (props: { chain, alias? }) => Promise<Wallet | undefined>
  createWallet,        // (props: ClientSideWalletCreateArgs) => Promise<Wallet | undefined>
  createDeviceSigner,  // () => Promise<DeviceSignerDescriptor> | undefined
  createPasskeySigner, // (name: string) => Promise<RegisterSignerPasskeyParams>
} = useWallet();
```

### `useWalletOtpSigner()`

在使用电子邮件/电话检索方法时,为自定义的OTP UI。 何时 `showOtpSignerPrompt` 设置为 `false`,使用这个钩子手动处理 OTP 流量 :

```tsx
const { needsAuth, sendOtp, verifyOtp, reject } = useWalletOtpSigner();
```

### `useCrossmintAuth()`

认证状态和 OAuth 登录 :

```tsx
const { loginWithOAuth, logout, user } = useCrossmintAuth();

// OAuth providers
loginWithOAuth("google");
loginWithOAuth("twitter");
```

## 构成部分

### `ExportPrivateKeyButton`

通过TEE对钱包的私钥导出按钮 。 只为电子邮件/手机签名人制作 .

```tsx
import { ExportPrivateKeyButton } from "@crossmint/client-sdk-react-native-ui";

<ExportPrivateKeyButton appearance={{ borderRadius: "12px" }} />
```

## 与反应 SDK 的区别

| 特性 | 反应 | 原生反应 |
| --- | --- | --- |
| 设备签名器存储 | 浏览器 iframe (`IframeDeviceSignerKeyStorage`(中文(简体) ) | 原生安全存储器(iOS Secure Enclave / Android Keystore) |
| 设备存储覆盖 | 未曝光 | `deviceSignerKeyStorage` 供应商的道具 |
| 内设检察官办公室 | 总是使出 | `showOtpSignerPrompt=true` (默认关闭) |
| Passkey 帮助工具 UI | `showPasskeyHelpers` 道具 | 不详 |
| TEE 通讯 | 隐藏框架 | 隐藏的 Webview (lazily 初始化) |

## 钱包 SDK

这个 `wallet` 对象返回 `useWallet()` 是一个 [`Wallet`](https://www.npmjs.com/package/@crossmint/wallets-sdk) 举个例子 钱包方法文档(端出、余额、符号等)见 [`@crossmint/wallets-sdk` 读取](https://www.npmjs.com/package/@crossmint/wallets-sdk)。 。 。 .

## 环境设置

1.  获取您的 API 密钥 [十字薄荷控制台](https://staging.crossmint.com/console/projects/apiKeys)
    
2.  添加到您的 `.env`数字 :
    

```bash
EXPO_PUBLIC_CROSSMINT_API_KEY=your_api_key_here
```

3.  配置深层链接 `app.json`数字 :

```json
{
  "expo": {
    "scheme": "your-app-scheme"
  }
}
```

## 文档

-   [交叉薄荷钱包文档](https://docs.crossmint.com/)
-   [SDK 参考](https://docs.crossmint.com/sdk-reference/wallets/react-native)
-   [钱包博览会快速启动](https://github.com/Crossmint/wallets-expo-quickstart)
-   [自定义认证指南( 反应原生)](https://docs.crossmint.com/wallets/guides/bring-your-own-auth#react-native)

## 许可证

阿帕奇 - 2.0

## 常见问题

### @crossmint/client-sdk-react-native-ui 是什么？

反应原生 SDK 集成 十字薄荷钱包 输入您的移动应用程序。 提供供应商、钩子和内置UI,用于钱包的创建、签名和检察官办公室的核查\.

### 如何安装 @crossmint/client-sdk-react-native-ui？

在项目目录运行 npm install @crossmint/client-sdk-react-native-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（^58\.0\.0）、react（\>=17\.0\.2）、expo-device（^58\.0\.0）、react-native（\>=0\.74\.3）、expo-constants（^58\.0\.0）、@solana/web3\.js（^1\.98\.1）、expo-web-browser（^58\.0\.0）、expo-secure-store（^58\.0\.0）、react-native-webview（^14\.0\.1）、react-native-get-random-values（\>=1\.11\.0 \<3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @crossmint/client-sdk-react-native-ui 支持 TypeScript 吗？

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

### @crossmint/client-sdk-react-native-ui 支持 ESM 还是 CommonJS？

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

### @crossmint/client-sdk-react-native-ui 可以商用吗？

@crossmint/client-sdk-react-native-ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @crossmint/client-sdk-react-native-ui 的下载量有多少？

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

### @crossmint/client-sdk-react-native-ui 还在维护吗？

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