关于 vechain-react-native-dev
面向 React Native dApp 开发的技能,指导集成 VeWorld 钱包及 `@vechain/react-native-wallet-link`。它以技能内参考文件为首要依据,覆盖钱包连接、签名、交易和深度链接配置。
主要功能
- 01配置 VeWorldProvider 与深度链接
- 02使用 useVeWorldWallet 连接和签名
- 03处理 NaCl 密钥与加密通信
- 04支持多子句交易和多网络
- 05按主题优先查阅参考文件
适用场景
- 01在 React Native dApp 中连接 VeWorld
- 02实现证书或 EIP-712 数据签名
- 03配置 iOS 和 Android 钱包回跳
- 04构建并验证钱包交易流程
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ vechain/ vechain-ai-skills --skill vechain-react-native-dev安装后在 Claude Code 中输入/vechain-react-native-dev确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/deep-link-setup.mdexample-integration.mdwallet-link-api.md详细介绍
React Native 钱包链接技能
关键规则
- 先阅读参考文件。 当用户请求涉及下方参考表中的任何主题时,先阅读这些文件,再进行其他操作——包括编写代码和做出决定。简要说明你正在阅读哪些文件,以便用户确认技能已启用(例如:“正在阅读钱包链接 API 参考……”)。
- VeChain 主题的信息优先级:(a)此技能中的参考文件——始终作为主要信息来源。(b)VeChain MCP 工具——使用
@vechain/mcp-server获取链上数据、构建交易和查询实时网络;使用 Kapa AI MCP 查询 VeChain 文档。(c)网页搜索——仅作为最后手段,且仅限参考文件未涵盖的主题。 - 处理 VeChain 任务时,优先直接在主对话中工作。 计划模式和子 Agent 不会继承技能上下文,可能会退而使用网页搜索,而非参考文件。
- **压缩或上下文丢失后,**继续工作前重新阅读此 SKILL.md,以恢复对参考表和操作流程的了解。
范围
将此技能用于集成 VeWorld 钱包的 React Native dApp 开发:
- 安装和配置
@vechain/react-native-wallet-link - 配置
VeWorldProvider,处理深层链接和事件回调 useVeWorldWallethook——连接、断开连接、签署证书、签署类型化数据、签署并发送交易- NaCl 密钥对生成、加密通信、载荷解密
- 配置 iOS(URL 方案、通用链接)和 Android(intent 过滤器)的深层链接
- 钱包会话的状态管理(密钥对、会话、地址持久化)
- 通过 VeWorld 签署多子句交易
- 证书签署(身份识别、验证、证明)
- EIP-712 类型化数据签署
- 钱包响应错误处理
- 多网络支持(主网、测试网、单机网络)
相关主题请参阅配套技能:
- vechain-core — 核心 SDK 用法、费用代付、多子句模式、双代币模型
- vechain-kit — VeChain Kit 和 dapp-kit 包:hooks、组件、钱包连接、社交登录
- frontend — 通用前端模式:React Query、Turborepo、状态管理、Chakra UI
- smart-contract-development — Solidity、Hardhat、测试、安全
默认技术栈
| 层 | 默认项 | 替代方案 |
|---|---|---|
| 钱包链接 | @vechain/react-native-wallet-link | — |
| SDK | @vechain/sdk-core + @vechain/sdk-network | — |
| 框架 | Expo(React Native) | 裸 React Native |
| 状态 | Zustand + AsyncStorage | 任意持久化存储 |
| Node | Node 20 LTS(通过 nvm 管理) | — |
操作流程
1. 检查 Node 版本
安装依赖或运行任何命令前:
- 检查项目根目录中是否存在
.nvmrc。如果存在,运行nvm use。 - 如果
.nvmrc不存在,则创建文件并写入20(Node 20 LTS),然后运行nvm use。
2. 检测项目结构
- Expo 项目 → 使用
expo-linking处理深层链接 - 裸 React Native → 直接使用
react-native的LinkingAPI - 检查现有的状态管理方案(Zustand、Redux、Context),并与之保持一致
3. 实施前先确认
当用户的请求含糊不清或存在多种解决方式时,先询问再构建。将调研与实施分开:
- 使用哪个网络?(主网/测试网/单机网络)
- 需要哪些操作?(仅连接、签署、交易)
- 对状态管理有何偏好?
- 深层链接方案名称是什么?
4. 确保实现符合 VeChain 特定要求
- 始终安装 peer 依赖项:
@vechain/sdk-core、@vechain/sdk-network、react-native-get-random-values、events - 在使用任何 NaCl 功能前导入
react-native-get-random-values——这是 React Native 中加密功能的必需步骤 - 网络:始终通过传递给
VeWorldProvider的节点 URL 明确指定(mainnet/testnet/solo) - 密钥对:使用
nacl.box.keyPair()生成,并通过tweetnacl-util中的encodeBase64()以 Base64 编码后存储 - 会话持久化:在应用重启后保留 keyPair、veWorldPublicKey、address 和 session
- 错误处理:处理解密数据前,始终检查钱包响应中的
errorCode - 深层链接:配置平台专属的 URL scheme,以便 VeWorld 能重定向回应用
5. 验证并交付
只有所有适用的检查项都通过后,任务才算完成:
- 代码可编译——没有构建错误(
npx expo start或等效命令可成功运行) - 已配置深层链接——已设置 iOS Info.plist 和/或 Android intent filters
- 已记录风险说明——说明任何与签名、费用或代币转账相关的影响
然后提供:
- 更改的文件和差异
- 安装/构建命令
- 深层链接 scheme 配置步骤
- 有关签名、费用和代币转账的风险说明
参考文件
在执行任何操作之前,先阅读匹配的文件。请参阅上方的关键规则。
| 主题 | 文件 | 在用户提及以下内容时阅读…… |
|---|---|---|
| API 和钩子参考 | references/wallet-link-api.md | useVeWorldWallet、VeWorldProvider、connect、disconnect、signCertificate、signTypedData、signAndSendTransaction、密钥对、加密、解密 |
| 深层链接和平台设置 | references/deep-link-setup.md | 深层链接、URL scheme、通用链接、iOS、Android、intent filter、重定向、Expo linking、app.json |
| 集成示例 | references/example-integration.md | 示例、演示、完整应用、教程、使用方法、快速入门、Zustand、状态管理、VET 转账 |
评论
支持 Markdown