---
title: "借助 AI 将 Adapty 集成到你的 React Native 应用中"
description: "使用 Cursor、Context7、ChatGPT、Claude 或其他 AI 工具，将 Adapty 集成到 React Native 应用中的分步指南。"
---

本指南帮助你借助 LLM 将 Adapty 集成到 React Native 应用中。你将从准备 Adapty 看板开始，然后通过向 LLM 发送聚焦的文档链接，逐步完成每个实施阶段。最后，你还会找到使用 AI 工具配合 Adapty 文档的最佳实践。

:::tip
将整个页面复制为 Markdown 并粘贴到你的 LLM 中即可开始——点击页面顶部的 **Copy for LLM**，或打开 [.md 版本](https://adapty.io/docs/zh/adapty-cursor-react-native.md)。LLM 将使用指南链接和检查点引导你完成每个阶段。
:::

## 开始之前：看板配置 \{#before-you-start-dashboard-setup\}

在编写任何 SDK 代码之前，Adapty 需要进行一些看板配置。你可以通过交互式 LLM 技能来完成，也可以通过看板手动操作。

### 技能方式（推荐） \{#skill-approach-recommended\}

Adapty CLI 技能让你的 LLM 可以直接设置应用、产品、访问等级、付费墙和版位——无需为每个步骤打开看板。你只需在看板中[连接你的应用商店](integrate-payments)即可。

```
npx skills add adaptyteam/adapty-cli --skill adapty-cli
```

添加技能后，在你的 agent 中运行 `/adapty-cli`。它将引导你完成每个步骤——包括何时打开看板连接你的应用商店。

### 看板方式 \{#dashboard-approach\}

如果你更喜欢手动配置，以下是编写任何代码之前需要完成的事项。你的 LLM 无法帮你查找看板中的值——你需要自行提供。

1. **连接你的应用商店**：在 Adapty 看板中，前往 **App settings → General**。如果你的应用同时面向两个平台，请同时连接 App Store 和 Google Play。这是购买功能正常运作的必要条件。
   [连接应用商店](integrate-payments)

2. **复制你的 Public SDK key**：在 Adapty 看板中，前往 **App settings → General**，然后找到 **API keys** 部分。在代码中，这是你传递给 `adapty.activate("YOUR_PUBLIC_SDK_KEY")` 的字符串。

3. **至少创建一个产品**：在 Adapty 看板中，前往 **Products** 页面。你不需要在代码中直接引用产品——Adapty 通过付费墙来传递它们。
   [添加产品](quickstart-products)

4. **创建付费墙和版位**：在 Adapty 看板中，在 **Paywalls** 页面创建付费墙，然后在 **Placements** 页面将其分配给版位。在代码中，版位 ID 是你传递给 `adapty.getPaywall("YOUR_PLACEMENT_ID")` 的字符串。
   [创建付费墙](quickstart-paywalls)

5. **设置访问等级**：在 Adapty 看板中，按产品在 **Products** 页面进行配置。在代码中，该字符串通过 `profile.accessLevels['premium']?.isActive` 进行检查。默认的 `premium` 访问等级适用于大多数应用。如果付费用户根据产品获得不同功能的访问权限（例如 `basic` 方案与 `pro` 方案），请在开始编码之前[创建额外的访问等级](assigning-access-level-to-a-product)。

:::tip
一旦完成以上五步，你就可以开始编写代码了。告诉你的 LLM："我的 Public SDK key 是 X，我的版位 ID 是 Y"，这样它就能生成正确的初始化和付费墙获取代码。
:::

### 准备就绪后再设置 \{#set-up-when-ready\}

以下内容不是开始编码的必要条件，但随着集成的成熟，你会需要它们：

- **A/B 测试**：在 **Placements** 页面进行配置。无需更改代码。
  [A/B 测试](ab-tests)
- **额外的付费墙和版位**：使用不同的版位 ID 添加更多 `getPaywall` 调用。
- **分析集成**：在 **Integrations** 页面进行配置。设置因集成而异。参见[分析集成](analytics-integration)和[归因集成](attribution-integration)。

## 向你的 LLM 提供 Adapty 文档 \{#feed-adapty-docs-to-your-llm\}

### 使用 Context7（推荐） \{#use-context7-recommended\}

[Context7](https://context7.com) 是一个 MCP 服务器，让你的 LLM 可以直接访问最新的 Adapty 文档。你的 LLM 会根据你的问题自动获取正确的文档——无需手动粘贴 URL。

Context7 适用于 **Cursor**、**Claude Code**、**Windsurf** 以及其他兼容 MCP 的工具。要进行设置，请运行：

```
npx ctx7 setup
```

这将检测你的编辑器并配置 Context7 服务器。如需手动设置，请参阅 [Context7 GitHub 仓库](https://github.com/upstash/context7)。

配置完成后，在你的提示中引用 Adapty 库：

```
Use the adaptyteam/adapty-docs library to look up how to install the React Native SDK
```

:::warning
即使 Context7 不再需要手动粘贴文档链接，实施顺序仍然很重要。请按照下面的[实施演练](#implementation-walkthrough)逐步操作，以确保一切正常工作。
:::

### 使用纯文本文档 \{#use-plain-text-docs\}

你可以以纯文本 Markdown 格式访问任意 Adapty 文档。在其 URL 末尾添加 `.md`，或点击文章标题下方的 **Copy for LLM**。例如：[adapty-cursor-react-native.md](https://adapty.io/docs/zh/adapty-cursor-react-native.md)。

下面[实施演练](#implementation-walkthrough)中的每个阶段都包含一个"发送给你的 LLM"代码块，其中包含可粘贴的 `.md` 链接。

如需一次获取更多文档，请参阅下面的[索引文件和平台专属子集](#plain-text-doc-index-files)。

## 实施演练 \{#implementation-walkthrough\}

本指南的其余部分按实施顺序介绍 Adapty 集成。每个阶段都包含要发送给 LLM 的文档、完成后应看到的结果以及常见问题。

### 规划你的集成 \{#plan-your-integration\}

在开始编写代码之前，请让你的 LLM 分析你的项目并制定实施计划。如果你的 AI 工具支持规划模式（如 Cursor 或 Claude Code 的规划模式），请使用它，这样 LLM 在编写任何代码之前就能读取你的项目结构和 Adapty 文档。

告诉你的 LLM 你使用哪种购买方式——这会影响它应遵循的指南：

- [**Adapty 付费墙编辑工具**](adapty-paywall-builder)：你在 Adapty 的无代码编辑工具中创建付费墙，SDK 会自动渲染它们。
- [**手动创建的付费墙**](react-native-making-purchases)：你在代码中构建自己的付费墙 UI，但仍使用 Adapty 获取产品和处理购买。
- [**Observer 模式**](observer-vs-full-mode)：你保留现有的购买基础设施，仅使用 Adapty 进行分析和集成。

不确定选哪个？阅读[快速入门中的对比表格](react-native-quickstart-paywalls)。

### 安装和配置 SDK \{#install-and-configure-the-sdk\}

使用 npm（或 yarn）添加 Adapty SDK 依赖项，并使用你的 Public SDK key 激活它。这是基础——没有它，其他任何功能都无法使用。

我们为 Expo 和纯 React Native 项目提供了单独的安装指南——请选择适合你设置的那个。

**指南：**
- [使用 Expo 安装](sdk-installation-react-native-expo)
- [使用纯 React Native 安装](sdk-installation-react-native-pure)

将以下内容发送给你的 LLM（选择适合你设置的那个，或两个都发送）：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/sdk-installation-react-native-expo.md
- https://adapty.io/docs/zh/sdk-installation-react-native-pure.md
```

:::tip[检查点]
- **预期结果：** 应用在 iOS 和 Android 上都能构建并运行。Metro bundler 日志显示 Adapty 激活日志。
- **注意事项：** "Public API key is missing" → 检查你是否已将占位符替换为 App settings 中的真实密钥。
:::

### 显示付费墙并处理购买 \{#show-paywalls-and-handle-purchases\}

通过版位 ID 获取付费墙，显示它，并处理购买事件。你需要的指南取决于你如何处理购买。

随时在沙盒中测试每次购买——不要等到最后。有关设置说明，请参阅[在沙盒中测试购买](test-purchases-in-sandbox)。

<Tabs groupId="paywall-approach">

<TabItem value="builder" label="Paywall Builder" default>

**指南：**
- [使用付费墙启用购买（快速入门）](react-native-quickstart-paywalls)
- [获取付费墙编辑工具付费墙及其配置](react-native-get-pb-paywalls)
- [显示付费墙](react-native-present-paywalls)
- [处理付费墙事件](react-native-handling-events-1)
- [响应按钮操作](react-native-handle-paywall-actions)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/react-native-quickstart-paywalls.md
- https://adapty.io/docs/zh/react-native-get-pb-paywalls.md
- https://adapty.io/docs/zh/react-native-present-paywalls.md
- https://adapty.io/docs/zh/react-native-handling-events-1.md
- https://adapty.io/docs/zh/react-native-handle-paywall-actions.md
```

:::tip[检查点]
- **预期结果：** 付费墙显示你配置的产品。点击产品会触发沙盒购买对话框。
- **注意事项：** 付费墙为空或出现 `getPaywall` 错误 → 验证版位 ID 与看板完全匹配，且版位已分配了目标受众。
:::

</TabItem>

<TabItem value="manual" label="Manual paywalls">

**指南：**
- [在自定义付费墙中启用购买（快速入门）](react-native-quickstart-manual)
- [获取付费墙和产品](fetch-paywalls-and-products-react-native)
- [渲染由远程配置设计的付费墙](present-remote-config-paywalls-react-native)
- [进行购买](react-native-making-purchases)
- [恢复购买](react-native-restore-purchase)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/react-native-quickstart-manual.md
- https://adapty.io/docs/zh/fetch-paywalls-and-products-react-native.md
- https://adapty.io/docs/zh/present-remote-config-paywalls-react-native.md
- https://adapty.io/docs/zh/react-native-making-purchases.md
- https://adapty.io/docs/zh/react-native-restore-purchase.md
```

:::tip[检查点]
- **预期结果：** 你的自定义付费墙显示从 Adapty 获取的产品。点击产品会触发沙盒购买对话框。
- **注意事项：** 产品数组为空 → 验证付费墙在看板中已分配产品，且版位有目标受众。
:::

</TabItem>

<TabItem value="observer" label="Observer mode">

**指南：**
- [Observer 模式概述](observer-vs-full-mode)
- [实现 Observer 模式](implement-observer-mode-react-native)
- [在 Observer 模式中报告交易](report-transactions-observer-mode-react-native)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/observer-vs-full-mode.md
- https://adapty.io/docs/zh/implement-observer-mode-react-native.md
- https://adapty.io/docs/zh/report-transactions-observer-mode-react-native.md
```

:::tip[检查点]
- **预期结果：** 使用现有购买流程完成沙盒购买后，交易出现在 Adapty 看板的 **Event Feed** 中。
- **注意事项：** 没有事件 → 验证你已向 Adapty 报告交易，且两个应用商店的服务器通知已配置。
:::

</TabItem>

</Tabs>

### 检查订阅状态 \{#check-subscription-status\}

购买后，检查用户画像中是否有激活的访问等级，以限制高级内容的访问。

**指南：** [检查订阅状态](react-native-check-subscription-status)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/react-native-check-subscription-status.md
```

:::tip[检查点]
- **预期结果：** 沙盒购买后，`profile.accessLevels['premium']?.isActive` 返回 `true`。
- **注意事项：** 购买后 `accessLevels` 为空 → 检查产品在看板中是否已分配访问等级。
:::

### 识别用户 \{#identify-users\}

将你的应用用户账户与 Adapty 用户画像关联，使购买记录可跨设备持久保存。

:::important
如果你的应用没有身份验证功能，请跳过此步骤。
:::

**指南：** [识别用户](react-native-quickstart-identify)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/zh/react-native-quickstart-identify.md
```

:::tip[检查点]
- **预期结果：** 调用 `adapty.identify("your-user-id")` 后，看板的 **Profiles** 部分显示你的自定义用户 ID。
- **注意事项：** 在激活后、获取付费墙之前调用 `identify`，以避免匿名用户画像归因问题。
:::

### 准备发布 \{#prepare-for-release\}

一旦你的集成在沙盒中正常运行，请按照发布检查清单操作，确保一切已准备好上线。

**指南：** [发布检查清单](release-checklist)

将以下内容发送给你的 LLM：
```
Read these Adapty docs before releasing:
- https://adapty.io/docs/zh/release-checklist.md
```

:::tip[检查点]
- **预期结果：** 所有检查清单项目均已确认：应用商店连接、服务器通知、购买流程、访问等级检查以及隐私要求。
- **注意事项：** 缺少服务器通知 → 在 **App settings → iOS SDK** 中配置 App Store 服务器通知，在 **App settings → Android SDK** 中配置 Google Play 实时开发者通知。
:::

## 纯文本文档索引文件 \{#plain-text-doc-index-files\}

如果你需要为 LLM 提供超出单个页面的更广泛上下文，我们托管了列出或合并所有 Adapty 文档的索引文件：

- [`llms.txt`](https://adapty.io/docs/zh/llms.txt)：列出所有页面及其 `.md` 链接。这是一个[新兴标准](https://llmstxt.org/)，用于让网站对 LLM 可访问。请注意，对于某些 AI agent（例如 ChatGPT），你需要下载 `llms.txt` 并将其作为文件上传到对话中。
- [`llms-full.txt`](https://adapty.io/docs/zh/llms-full.txt)：将整个 Adapty 文档站点合并为单个文件。文件非常大——仅在需要完整内容时使用。
- React Native 专属的 [`react-native-llms.txt`](https://adapty.io/docs/zh/react-native-llms.txt) 和 [`react-native-llms-full.txt`](https://adapty.io/docs/zh/react-native-llms-full.txt)：与完整站点相比，平台专属子集可节省 token 用量。