# REACT-NATIVE - Adapty Documentation (Full Content) This file contains the complete content of all documentation pages for this platform. Locale: zh Generated on: 2026-07-24T13:01:53.398Z Total files: 45 --- # File: sdk-installation-react-native-expo --- --- title: "Install & configure Adapty React Native SDK in an Expo project" description: "Step-by-step guide on installing Adapty React Native SDK in an Expo project for subscription-based apps." --- :::important 本指南介绍如何在 **Expo 项目**中安装和配置 Adapty React Native SDK。 如果你使用的是**纯 React Native(不含 Expo)**,请参阅 [React Native 安装指南](sdk-installation-react-native-pure)。 ::: Adapty SDK 包含两个核心模块,可无缝集成到你的 React Native 应用中: - **Core Adapty**:此模块是 Adapty 在您的应用中正常运行的必要组件。 - **AdaptyUI**:如果您使用 [Adapty 付费墙编辑工具](adapty-paywall-builder)——一款无需编写代码即可轻松创建跨平台付费墙的工具,则需要此模块。AdaptyUI 会随核心模块一并自动激活。 如果您需要一份关于如何在 React Native 应用中实现 IAP 的完整教程,请参阅[这篇文章](https://adapty.io/blog/react-native-in-app-purchases-tutorial/)。 :::tip 想看看 Adapty SDK 如何集成到 Expo 应用中的真实示例?请参考我们的示例应用: - [Expo dev build 示例](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/FocusJournalExpo):包含真实购买和付费墙编辑工具的完整功能 - [Expo Go & Web 示例](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/ExpoGoWebMock):使用模拟模式进行测试 ::: 如需完整的实现流程演示,也可以观看以下视频:
## 要求 \{#requirements\} Adapty React Native SDK 要求 iOS 15.0 或更高版本。 构建 iOS 需要 **Swift 6.0** 或更高版本。[儿童模式](kids-mode-react-native) 需要 **Swift 6.1** 或更高版本。 :::info 从 SDK v3.17 开始,Adapty SDK 默认使用 Google Play Billing Library v8.0.0。 ::: :::info 安装 SDK 是 Adapty 配置流程的第 5 步。在应用内购买正常运行之前,您还需要将应用连接到各应用商店,然后在 Adapty 看板中创建产品、付费墙和版位。[快速入门指南](quickstart)涵盖了所有必要步骤。 ::: ## 安装 Adapty SDK \{#install-adapty-sdk\} :::important 从 v4 版本开始,Adapty React Native SDK 不再支持通过 CocoaPods 安装其原生依赖项。如果你需要 v4 或更高版本(用于 [Flow Builder](adapty-flow-builder)),请按照下方的 [Adapty SDK 4.0:启用 Swift Package Manager](#adapty-sdk-40-enable-swift-package-manager) 进行操作。 ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) :::important 使用 [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/)(自定义开发构建版)才能在 Expo 项目中使用 Adapty。 Expo Go 不支持自定义原生模块,因此只能在[**模拟模式**](#set-up-mock-mode-for-expo-go--expo-web)下用于 UI/逻辑开发(不支持真实购买,也不支持 AdaptyUI/付费墙编辑工具渲染)。 ::: 1. 安装 Adapty SDK(同时会自动安装 `@adapty/core`): ```sh npx expo install react-native-adapty npx expo prebuild ``` 2. 使用 EAS 或本地构建为开发环境构建应用: ```sh # For iOS eas build --profile development --platform ios # For Android eas build --profile development --platform android ``` ```sh # For iOS npx expo run:ios # For Android npx expo run:android ``` 3. 启动开发服务器: ```sh npx expo start --dev-client ``` ### Adapty SDK 4.0:启用 Swift Package Manager \{#adapty-sdk-40-enable-swift-package-manager\} React Native SDK 4.0(新增 [Flow Builder](adapty-flow-builder) 支持)需要 **React Native 0.75 或更高版本**。安装 SDK: ```sh npx expo install react-native-adapty@^4.0.0 ``` v4 通过 Swift Package Manager 而非 CocoaPods 子依赖来拉取原生 iOS SDK(`Adapty`、`AdaptyUI`、`AdaptyPlugin`)([CocoaPods 的 spec 仓库将于 2026 年 12 月变为只读](https://blog.cocoapods.org/CocoaPods-Specs-Repo/))。SPM 需要动态框架,在 Expo 中可通过 [`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/) 插件来启用。将其添加到 `app.json`(或 `app.config.js`): ```json showLineNumbers title="app.json" { "expo": { "plugins": [ [ "expo-build-properties", { "ios": { "useFrameworks": "dynamic" } } ] ] } } ``` 然后安装插件并重新生成原生项目: ```sh npx expo install expo-build-properties npx expo prebuild --clean ``` 完整迁移步骤请参阅 [将 Adapty React Native SDK 迁移至 v4](migration-to-react-native-sdk-v4)。 ## 激活 Adapty SDK 的 Adapty 模块 \{#activate-adapty-module-of-adapty-sdk\} 获取您的 **Public SDK Key**: 1. 打开 Adapty 看板,导航至 [**App settings → General**](https://app.adapty.io/settings/general)。 2. 在 **Api keys** 部分,复制 **Public SDK Key**(不是 Secret Key)。 3. 将代码中的 `"YOUR_PUBLIC_SDK_KEY"` 替换为实际值。 或者,使用 [Adapty CLI](developer-cli) 以编程方式获取: ``` npm install -g adapty adapty auth login adapty apps list ``` 或者,直接运行: ``` npx adapty auth login adapty apps list ``` - 请确保使用 **Public SDK key** 初始化 Adapty,**Secret key** 仅用于[服务端 API](getting-started-with-server-side-api)。 - **SDK keys** 对每个应用都是唯一的,如果您有多个应用,请确保选择正确的那个。 将以下代码复制到 `App.tsx` 以激活 Adapty: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important 在调用任何其他 Adapty SDK 方法之前,请等待 `activate` 执行完成。完整的调用顺序请参阅 [React Native SDK 的调用顺序](react-native-sdk-call-order)。 ::: 现在在你的应用中配置付费墙: - 如果您使用 [Adapty 付费墙编辑工具](adapty-paywall-builder),请参考[付费墙编辑工具快速入门](react-native-quickstart-paywalls)。 - 如果您自行构建付费墙 UI,请参考[自定义付费墙快速入门](react-native-quickstart-manual)。 :::tip 如需避免在开发环境中出现激活错误,请参考[相关技巧](#development-environment-tips)。 ::: ## 激活 Adapty SDK 的 AdaptyUI 模块 \{#activate-adaptyui-module-of-adapty-sdk\} 如果你计划使用[付费墙编辑工具](adapty-paywall-builder),则需要 AdaptyUI 模块。当你激活核心模块时,它会自动激活,无需额外操作。 ## 可选配置 \{#optional-setup\} ### 日志记录 \{#logging\} #### 配置日志系统 \{#set-up-the-logging-system\} Adapty 会记录错误和其他重要信息,帮助你了解运行状况。可用的日志级别如下: | Level | Description | | ---------- | ------------------------------------------------------------ | | `error` | 仅记录错误日志 | | `warn` | 记录错误以及 SDK 中不会导致严重错误但值得关注的消息 | | `info` | 记录错误、警告及各类信息消息 | | `verbose` | 记录调试时可能有用的所有附加信息,例如函数调用、API 请求等 | 您可以在应用中配置 Adapty 之前或期间设置日志级别: ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### 数据政策 \{#data-policies\} Adapty 不会存储用户的个人数据,除非您主动发送,但您可以实施额外的数据安全策略,以符合应用商店或特定国家/地区的要求。 #### 禁用 IP 地址收集与共享 \{#disable-ip-address-collection-and-sharing\} 在激活 Adapty 模块时,将 `ipAddressCollectionDisabled` 设置为 `true` 以禁用用户 IP 地址的收集与共享。默认值为 `false`。 使用此参数可以保护用户隐私、遵守地区数据保护法规(如 GDPR 或 CCPA),或在应用不需要基于 IP 的功能时减少不必要的数据收集。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### 禁用广告 ID 的收集与共享 \{#disable-advertising-id-collection-and-sharing\} 在激活 Adapty 模块时,将 `ios.idfaCollectionDisabled`(iOS)或 `android.adIdCollectionDisabled`(Android)设置为 `true` 即可禁用广告标识符的收集。默认值为 `false`。 如需遵守 App Store/Play Store 政策、避免触发应用跟踪透明度(ATT)弹窗,或者你的应用不需要基于广告 ID 的广告归因或数据分析,可使用此参数。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### 为 AdaptyUI 配置媒体缓存 \{#set-up-media-cache-configuration-for-adaptyui\} AdaptyUI 默认会缓存媒体文件(如图片和视频),以提升性能并减少网络流量消耗。你可以通过提供自定义配置来调整缓存设置。 使用 `mediaCache` 覆盖默认缓存设置: ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` | 参数 | 是否必填 | 描述 | |-----------|----------|-------------| | memoryStorageTotalCostLimit | 可选 | 内存缓存总大小,单位为字节。默认值因平台而异。 | | memoryStorageCountLimit | 可选 | 内存存储的条目数量上限。默认值因平台而异。 | | diskStorageSizeLimit | 可选 | 磁盘上的文件大小上限,单位为字节。默认值因平台而异。 | ### 启用本地访问等级(Android)\{#enable-local-access-levels-android\} 默认情况下,[本地访问等级](local-access-levels)在 iOS 上已启用,在 Android 上处于禁用状态。如需在 Android 上同样启用,请将 `localAccessLevelAllowed` 设置为 `true`: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### 从备份恢复时清除数据 \{#clear-data-on-backup-restore\} 当 `clearDataOnBackup` 设置为 `true` 时,SDK 会检测应用是否从 iCloud 备份中恢复,并删除所有本地存储的 SDK 数据,包括已缓存的用户画像信息、产品详情和付费墙。SDK 随后会以全新状态重新初始化。默认值为 `false`。 :::note 仅删除本地 SDK 缓存。Apple 的交易记录以及 Adapty 服务器上的用户数据不受影响。 ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## 开发环境使用技巧 \{#development-environment-tips\} #### 为 Expo Go / Expo Web 配置模拟模式 \{#set-up-mock-mode-for-expo-go--expo-web\} Expo Go 和 Expo Web 环境无法访问 Adapty 的原生模块。为了在构建和测试应用 UI 及付费墙逻辑时避免运行时错误,Adapty 提供了**模拟模式**。 ::::important 模拟模式**不是**用于测试真实购买的工具: - 它**不会打开** App Store / Google Play 购买流程,也**不会创建**真实交易。 - 它**不会渲染**使用 **Adapty 付费墙编辑工具 (AdaptyUI)** 创建的付费墙/用户引导。 - Adapty 的原生模块会被**完全绕过**——即使 Xcode/Android 构建中缺少原生 SDK 文件或 API key 无效,也不会触发错误。 如需测试真实购买和付费墙编辑工具付费墙,请使用 Expo Dev Client / 生产构建,其中模拟模式会自动禁用。 :::: **默认情况下**,SDK 会自动检测 Expo Go 和 Web 环境并启用模拟模式。除非你想自定义模拟数据,否则无需做任何配置。 模拟模式激活后: - 所有 Adapty 方法均返回模拟数据,不会向 Adapty 服务器发起网络请求。 - 默认情况下,初始模拟用户画像没有任何有效订阅。 - 默认情况下,`makePurchase(...)` 会模拟一次成功的购买并授予高级访问等级。 您可以在激活时通过 `mockConfig` 自定义模拟数据。配置格式和支持的参数请参阅[此处](https://react-native.adapty.io/interfaces/adaptymockconfig)。 ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` 如果需要在激活前调用 SDK 方法(例如 `isActivated()` 或 `setLogLevel()`),请在 `activate()` 之前调用 `enableMock()`。如果 bridge 已经初始化,此方法不会执行任何操作。 ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // 可选:传入 mockConfig 来自定义模拟数据 // 现在可以在激活前调用方法 await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` #### 出于开发目的延迟 SDK 激活 \{#delay-sdk-activation-for-development-purposes\} Adapty 在 SDK 激活时会预先获取所有必要的用户数据,从而更快地访问最新数据。 但在 iOS 模拟器中,这可能会带来问题——开发过程中模拟器经常弹出身份验证提示。虽然 Adapty 无法控制 StoreKit 的身份验证流程,但可以延迟 SDK 获取最新用户数据的请求时机。 启用 `__debugDeferActivation` 属性后,`activate` 调用会被挂起,直到你发起下一次 Adapty SDK 调用。这样一来,如果不需要身份验证数据,就不会触发多余的验证提示。 需要注意的是,**此功能仅供开发阶段使用**,因为它并不涵盖所有潜在的用户场景。在生产环境中,不应延迟激活,因为真实设备通常会记住认证数据,不会反复提示用户输入凭据。 以下是推荐的使用方式: ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### 排查 React Native Fast Refresh 导致的 SDK 激活错误 \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} 在 React Native 中使用 Adapty SDK 进行开发时,你可能会遇到以下错误:`Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` 这是因为 React Native 的快速刷新(fast refresh)功能会在开发过程中触发多次激活调用。为了避免这种情况,请将 `__ignoreActivationOnFastRefresh` 选项设置为 `__DEV__`(React Native 的开发模式标志)。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` ## 故障排查 \{#troubleshooting\} #### iOS 最低版本错误 \{#minimum-ios-version-error\} 在为 iOS 构建时,你可能会看到关于 **最低 iOS 版本** 或部署目标的错误。Adapty 要求 **iOS 15.0+**。 由于 Expo 在执行 `expo prebuild` 时会自动生成 iOS 项目(包括 `Podfile`),**请勿直接编辑 `Podfile`**。应通过 `expo-build-properties` 配置插件来设置部署目标。 1. 安装插件: ```sh npx expo install expo-build-properties ``` 2. 更新你的 Expo 配置(`app.json` 或 `app.config.js`),设置 iOS 部署目标: ``` { "expo": { // ...other Expo config... "plugins": [ [ "expo-build-properties", { "ios": { // Adapty requires iOS 15.0+. "deploymentTarget": "15.0" } } ], ] } } ``` 3. 重新生成原生 iOS 项目并重新构建: ``` npx expo prebuild --clean npx expo run:ios # or `eas build -p ios` on your CI ``` #### Android 自动备份清单冲突 \{#android-auto-backup-manifest-conflict\} 当使用 Expo 并集成多个配置 Android Auto Backup 的 SDK(如 Adapty、AppsFlyer 或 expo-secure-store)时,可能会遇到 manifest 合并冲突。 典型的错误如下:`Manifest merger failed : Attribute application@fullBackupContent value=(@xml/secure_store_backup_rules) from AndroidManifest.xml:24:248-306 is also present at [io.adapty:android-sdk:3.12.0] AndroidManifest.xml:9:18-70 value=(@xml/adapty_backup_rules).` 要解决此冲突,您需要让 Adapty 插件管理 Android 备份配置。 如果您的项目也使用了 `expo-secure-store`,请禁用其自身的备份设置以避免冲突。 以下是配置 `app.json` 的方法: ```json title="app.json" { "expo": { "plugins": [ ["react-native-adapty", { "replaceAndroidBackupConfig": true }], ["expo-secure-store", { "configureAndroidBackup": false }] ] } } ``` `replaceAndroidBackupConfig` 选项默认为 `false`。启用后,Adapty 插件将接管 Android 备份规则的控制权。 如果你使用了 `expo-secure-store`,请添加 `"configureAndroidBackup": false` 以避免警告,因为 SecureStore 的备份配置现在将由 Adapty 统一管理。 :::important 此配置仅满足 Adapty、AppsFlyer 和 expo-secure-store 的备份要求。 如果项目中其他库定义了自定义备份规则,你需要手动配置这些规则。 ::: --- # File: sdk-installation-react-native-pure --- --- title: "Install & configure Adapty SDK in a pure React Native project" description: "Step-by-step guide on installing Adapty SDK on React Native for subscription-based apps." --- :::important 本指南仅适用于**纯 React Native(非 Expo)项目**。 如果你使用的是 **Expo**,请参阅 [Expo 安装指南](sdk-installation-react-native-expo)。 ::: Adapty SDK 包含两个核心模块,用于无缝集成到你的 React Native 应用中: - **Core Adapty**:此模块是 Adapty 在您的应用中正常运行所必需的。 - **AdaptyUI**:如果您使用[付费墙编辑工具](adapty-paywall-builder)(一款无需编写代码即可轻松创建跨平台付费墙的工具),则需要此模块。AdaptyUI 会随核心模块一起自动激活。 :::tip 想看看 Adapty SDK 在移动应用中的真实集成示例吗?查看我们的[示例应用](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples),其中演示了完整的配置流程,包括展示付费墙、完成购买以及其他基本功能。 ::: ## 要求 \{#requirements\} Adapty React Native SDK 要求 iOS 15.0 及以上版本。 构建 iOS 应用需要 **Swift 6.0** 或更高版本。[儿童模式](kids-mode-react-native) 需要 **Swift 6.1** 或更高版本。 :::info 从 SDK v3.17 开始,Adapty SDK 默认使用 Google Play Billing Library v8.0.0。 ::: :::info 安装 SDK 是 Adapty 配置流程的第 5 步。在应用内购买正常运行之前,您还需要将应用连接到各应用商店,然后在 Adapty 看板中创建产品、付费墙和版位。[快速入门指南](quickstart)涵盖了所有必要步骤。 ::: ## 安装 Adapty SDK \{#install-adapty-sdk\} :::important 从 v4 版本开始,Adapty React Native SDK 不再支持通过 CocoaPods 安装其原生依赖。如果你需要 v4 或更高版本(用于 [Flow Builder](adapty-flow-builder)),请参阅下方的[Adapty SDK 4.0:启用 Swift Package Manager](#adapty-sdk-40-enable-swift-package-manager)。 ::: [![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases) 1. 安装 Adapty SDK(同时会自动安装 `@adapty/core`): ```sh showLineNumbers title="Shell" # using npm npm install react-native-adapty # or using yarn yarn add react-native-adapty ``` 2. 对于 iOS,安装 pods: ```sh showLineNumbers title="Shell" cd ios && pod install ```
对于 Android,如果你的 React Native 版本低于 0.73.0(点击展开) 更新 `/android/build.gradle` 文件,确保其中包含 `kotlin-gradle-plugin:1.8.0` 或更高版本的依赖: ```groovy showLineNumbers title="/android/build.gradle" ... buildscript { ... dependencies { ... classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0" } } ... ```
### Adapty SDK 4.0:启用 Swift Package Manager \{#adapty-sdk-40-enable-swift-package-manager\} React Native SDK 4.0——新增了 [Flow Builder](adapty-flow-builder) 支持——要求 **React Native 0.75 或更高版本**。安装 SDK: ```sh showLineNumbers title="Shell" npm install react-native-adapty@^4.0.0 # or using yarn yarn add react-native-adapty@^4.0.0 ``` v4 通过 Swift Package Manager 而非 CocoaPods 子依赖项来拉取原生 iOS SDK(`Adapty`、`AdaptyUI`、`AdaptyPlugin`)([CocoaPods 的 spec 仓库将于 2026 年 12 月进入只读状态](https://blog.cocoapods.org/CocoaPods-Specs-Repo/))。SPM 需要动态框架——在 `ios/Podfile` 目标中添加以下内容,然后重新安装 pods: ```ruby showLineNumbers title="ios/Podfile" use_frameworks! :linkage => :dynamic ``` ```sh showLineNumbers title="Shell" cd ios && pod install --repo-update ``` 如果您之前通过 CocoaPods 将 `Adapty`、`AdaptyUI` 或 `AdaptyPlugin` 作为子依赖项引入,请先从 `Podfile` 中删除所有显式的 `pod 'Adapty'`、`pod 'AdaptyUI'` 或 `pod 'AdaptyPlugin'` 行。 :::warning 从默认的静态链接切换为动态框架可能会与尚不支持模块化头文件的库产生冲突,并且与 Flipper 不兼容。详情请参阅 [将 Adapty React Native SDK 迁移至 v4](migration-to-react-native-sdk-v4)。 ::: ## 激活 Adapty SDK 的 Adapty 模块 \{#activate-adapty-module-of-adapty-sdk\} 获取您的 **Public SDK Key**: 1. 打开 Adapty 看板,导航至 [**App settings → General**](https://app.adapty.io/settings/general)。 2. 在 **Api keys** 部分,复制 **Public SDK Key**(不是 Secret Key)。 3. 将代码中的 `"YOUR_PUBLIC_SDK_KEY"` 替换为实际值。 或者,使用 [Adapty CLI](developer-cli) 以编程方式获取: ``` npm install -g adapty adapty auth login adapty apps list ``` 或者,直接运行: ``` npx adapty auth login adapty apps list ``` - 请确保使用 **Public SDK key** 初始化 Adapty,**Secret key** 仅用于[服务端 API](getting-started-with-server-side-api)。 - **SDK keys** 对每个应用都是唯一的,如果您有多个应用,请确保选择正确的那个。 将以下代码复制到 `App.tsx` 以激活 Adapty: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` :::important 在调用其他任何 Adapty SDK 方法之前,请等待 `activate` 完成。完整调用顺序请参阅 [React Native SDK 的调用顺序](react-native-sdk-call-order)。 ::: 现在在您的应用中配置付费墙: - 如果你使用 [Adapty 付费墙编辑工具](adapty-paywall-builder),请参阅[付费墙编辑工具快速入门](react-native-quickstart-paywalls)。 - 如果你自行构建付费墙 UI,请参阅[自定义付费墙快速入门](react-native-quickstart-manual)。 :::tip 如需避免开发环境中的激活错误,请参考[相关技巧](#development-environment-tips)。 ::: ## 激活 Adapty SDK 的 AdaptyUI 模块 \{#activate-adaptyui-module-of-adapty-sdk\} 如果你打算使用[付费墙编辑工具](adapty-paywall-builder),则需要 AdaptyUI 模块。激活核心模块时,该模块会自动激活,无需额外操作。 ## 可选配置 \{#optional-setup\} ### 日志记录 \{#logging\} #### 设置日志系统 \{#set-up-the-logging-system\} Adapty 会记录错误和其他重要信息,帮助你了解运行情况。以下是可用的日志级别: | Level | Description | | ---------- | ------------------------------------------------------------ | | `error` | 仅记录错误日志 | | `warn` | 记录错误以及 SDK 中不会导致严重错误但值得关注的消息 | | `info` | 记录错误、警告以及各类信息消息 | | `verbose` | 记录调试时可能有用的任何附加信息,例如函数调用、API 请求等 | 您可以在应用程序中配置 Adapty 之前或配置期间设置日志级别: ```typescript showLineNumbers title="App.tsx" // Set log level before activation // 'verbose' is recommended for development and the first production release adapty.setLogLevel('verbose'); // Or set it during configuration adapty.activate('YOUR_PUBLIC_SDK_KEY', { logLevel: 'verbose', }); ``` ### 数据政策 \{#data-policies\} 除非您明确发送,否则 Adapty 不会存储用户的个人数据。您还可以实施额外的数据安全政策,以符合应用商店或所在国家/地区的合规要求。 #### 禁用 IP 地址收集与共享 \{#disable-ip-address-collection-and-sharing\} 在激活 Adapty 模块时,将 `ipAddressCollectionDisabled` 设置为 `true` 可禁用用户 IP 地址的收集与共享。默认值为 `false`。 使用此参数可增强用户隐私保护、遵守区域数据保护法规(如 GDPR 或 CCPA),或在应用不需要基于 IP 的功能时减少不必要的数据收集。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ipAddressCollectionDisabled: true, }); ``` #### 禁用广告 ID 的收集与共享 \{#disable-advertising-id-collection-and-sharing\} 激活 Adapty 模块时,将 `ios.idfaCollectionDisabled`(iOS)或 `android.adIdCollectionDisabled`(Android)设置为 `true` 可禁用广告标识符的收集。默认值为 `false`。 如需遵守 App Store/Play Store 政策、避免触发应用追踪透明度提示,或者您的应用不需要基于广告 ID 的广告归因或分析,请使用此参数。 ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { idfaCollectionDisabled: true, }, android: { adIdCollectionDisabled: true, }, }); ``` #### 为 AdaptyUI 配置媒体缓存 \{#set-up-media-cache-configuration-for-adaptyui\} 默认情况下,AdaptyUI 会缓存媒体文件(如图片和视频)以提升性能、减少网络流量。你可以通过自定义配置来调整缓存设置。 使用 `mediaCache` 覆盖默认缓存设置: ```typescript adapty.activate('YOUR_PUBLIC_SDK_KEY', { mediaCache: { memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes memoryStorageCountLimit: 2147483647, // Optional: max number of items in memory diskStorageSizeLimit: 200 * 1024 * 1024, // Optional: disk cache size in bytes }, }); ``` | 参数 | 是否必填 | 描述 | |-----------|----------|-------------| | memoryStorageTotalCostLimit | 可选 | 内存缓存总大小(字节)。默认值因平台而异。 | | memoryStorageCountLimit | 可选 | 内存存储的条目数量上限。默认值因平台而异。 | | diskStorageSizeLimit | 可选 | 磁盘文件大小上限(字节)。默认值因平台而异。 | ### 启用本地访问等级(Android)\{#enable-local-access-levels-android\} 默认情况下,[本地访问等级](local-access-levels)在 iOS 上已启用,在 Android 上处于禁用状态。如需在 Android 上同样启用,请将 `localAccessLevelAllowed` 设置为 `true`: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { android: { localAccessLevelAllowed: true, }, }); ``` ### 恢复备份时清除数据 \{#clear-data-on-backup-restore\} 当 `clearDataOnBackup` 设置为 `true` 时,SDK 会检测应用从 iCloud 备份恢复的情况,并删除所有本地存储的 SDK 数据,包括已缓存的用户画像信息、产品详情和付费墙。之后 SDK 将以全新状态完成初始化。默认值为 `false`。 :::note 仅删除本地 SDK 缓存。Apple 的交易记录以及 Adapty 服务器上的用户数据不受影响。 ::: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { ios: { clearDataOnBackup: true }, }); ``` ## 开发环境使用技巧 \{#development-environment-tips\} #### 在开发阶段延迟 SDK 激活 \{#delay-sdk-activation-for-development-purposes\} Adapty 在 SDK 激活时会预先拉取所有必要的用户数据,从而加快获取最新数据的速度。 然而,在 iOS 模拟器中,这可能会引发一个问题——开发过程中模拟器会频繁弹出身份验证提示。虽然 Adapty 无法控制 StoreKit 的身份验证流程,但可以推迟 SDK 发出请求以获取最新用户数据的时机。 通过启用 `__debugDeferActivation` 属性,激活调用将被推迟,直到你发起下一次 Adapty SDK 调用。这样可以避免在不需要认证数据时弹出不必要的提示。 需要注意的是,**此功能仅供开发使用**,因为它并不能覆盖所有潜在的用户场景。在生产环境中,不应延迟激活,因为真实设备通常会记住认证数据,不会反复提示输入凭据。 以下是推荐的使用方式: ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### 排查 React Native Fast Refresh 中 SDK 激活报错的问题 \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\} 在 React Native 中使用 Adapty SDK 开发时,你可能会遇到以下报错:`Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.` 这是因为 React Native 的快速刷新功能在开发过程中会多次触发激活调用。要避免这一问题,请将 `__ignoreActivationOnFastRefresh` 选项设置为 `__DEV__`(React Native 的开发模式标志)。 ```typescript showLineNumbers title="Typescript" try { adapty.activate('PUBLIC_SDK_KEY', { __ignoreActivationOnFastRefresh: __DEV__, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); // Handle the error appropriately for your app } ``` #### 为本地测试设置模拟模式 \{#set-up-mock-mode-for-local-testing\} 对于本地开发和测试,您可以启用模拟模式,无需沙盒 App Store/Google Play 账号,从而加快迭代速度。模拟模式完全绕过 Adapty 的原生模块,返回模拟数据。 :::important 模拟模式**不是**用于测试真实购买的工具: - 它**不会打开** App Store / Google Play 的购买流程,也**不会创建**真实交易。 - 它**不会渲染**使用 **Adapty Paywall Builder (AdaptyUI)** 创建的付费墙/用户引导。 - Adapty 的原生模块会被**完全绕过**——即使 Xcode/Android 构建中缺少原生 SDK 文件或 API 密钥无效,也不会触发错误。 - 不会向 Adapty 服务器发送任何数据。 如需测试真实购买和付费墙编辑工具创建的付费墙,请禁用模拟模式并使用沙盒账户。 ::: 要启用模拟模式,请将 `enableMock` 设置为 `true`: ```typescript showLineNumbers title="App.tsx" adapty.activate('YOUR_PUBLIC_SDK_KEY', { enableMock: true, }); ``` 当模拟模式处于激活状态时: - 所有 Adapty 方法均返回模拟数据,不会向 Adapty 服务器发起网络请求。 - 默认情况下,初始模拟用户画像不包含任何活跃订阅。 - 默认情况下,`makePurchase(...)` 会模拟一次成功的购买并授予高级访问权限。 你可以在激活时通过 `mockConfig` 自定义模拟数据。配置格式和支持的参数详见[此处](https://react-native.adapty.io/interfaces/adaptymockconfig)。 ```typescript showLineNumbers title="App.tsx" try { await adapty.activate('YOUR_PUBLIC_SDK_KEY', { mockConfig: { // Customize the initial mock profile (optional) }, }); } catch (error) { console.error('Failed to activate Adapty SDK:', error); } ``` 如果你需要在激活之前调用 SDK 方法(例如 `isActivated()` 或 `setLogLevel()`),请在 `activate()` 之前使用 `enableMock()`。如果 bridge 已经初始化,此方法将不执行任何操作。 ```typescript showLineNumbers title="App.tsx" adapty.enableMock(); // Optional: pass mockConfig to customize mock data // Now you can call methods before activation await adapty.activate('YOUR_PUBLIC_SDK_KEY'); ``` ## 故障排查 \{#troubleshooting\} #### iOS 最低版本错误 \{#minimum-ios-version-error\} 如果遇到 iOS 最低版本错误,请更新你的 Podfile: ```diff -platform :ios, min_ios_version_supported +platform :ios, '15.0' ``` #### Android 自动备份清单冲突 \{#android-auto-backup-manifest-conflict\} 部分 SDK(包括 Adapty)会自带 Android 自动备份配置。如果多个 SDK 都定义了备份规则,Android 清单合并工具可能会报错,提示 `android:fullBackupContent`、`android:dataExtractionRules` 或 `android:allowBackup` 相关问题。 常见错误示例:`Manifest merger failed: Attribute application@dataExtractionRules value=(@xml/your_data_extraction_rules) is also present at [com.other.sdk:library:1.0.0] value=(@xml/other_sdk_data_extraction_rules)` :::note 以下更改应在你的 Android 平台目录(通常位于项目的 `android/` 文件夹)中进行。 ::: 要解决此问题,你需要: - 告知清单合并工具使用应用自身的备份相关属性值。 - 创建备份规则文件,将 Adapty 的规则与其他 SDK 的规则合并。 #### 1. 在清单中添加 `tools` 命名空间 \{#1-add-the-tools-namespace-to-your-manifest\} 在 `AndroidManifest.xml` 文件中,确保根标签 `` 包含 tools: ```xml ... ``` #### 2. 在 `` 中覆盖备份属性 \{#2-override-backup-attributes-in-application\} 在同一个 `AndroidManifest.xml` 文件中,更新 `` 标签,使应用提供最终属性值,并告知清单合并工具替换库中的值: ```xml ... ``` 如果某个 SDK 也设置了 `android:allowBackup`,请将其一并加入 `tools:replace`: ```xml tools:replace="android:allowBackup,android:fullBackupContent,android:dataExtractionRules" ``` #### 3. 创建合并后的备份规则文件 \{#3-create-merged-backup-rules-files\} 在 Android 项目的 `res/xml/` 目录下创建 XML 文件,将 Adapty 的规则与其他 SDK 的规则合并。Android 根据系统版本使用不同的备份规则格式,同时创建两个文件可确保应用所支持的所有 Android 版本都能正常兼容。 :::note 以下示例以 AppsFlyer 作为第三方 SDK 的示例。请替换或添加你应用中实际使用的其他 SDK 的规则。 ::: **Android 12 及更高版本**(使用新的数据提取规则格式): ```xml title="sample_data_extraction_rules.xml" ``` **Android 11 及更低版本**(使用旧版完整备份内容格式): ```xml title="sample_backup_rules.xml" #### 在 Android 上从其他应用返回后购买失败 \{#purchases-fail-after-returning-from-another-app-in-android\} 如果启动购买流程的 Activity 使用了非默认的 `launchMode`,当用户从 Google Play、银行应用或浏览器返回时,Android 可能会以错误的方式重新创建或复用该 Activity,导致购买结果丢失或被视为已取消。 为确保购买流程正常运行,请仅为启动购买流程的 Activity 使用 `standard` 或 `singleTop` 启动模式,避免使用其他模式。 在 `AndroidManifest.xml` 中,确保启动购买流程的 Activity 设置为 `standard` 或 `singleTop`: ```xml ``` #### Podfile 中 SWIFT_VERSION 覆盖导致的 Swift 6 构建错误 \{#swift-6-build-errors-caused-by-podfile-swift-version-override\} 在为 iOS 构建 React Native 应用时,你可能会在 Adapty pod 目标上遇到 Swift 6 编译错误。常见症状包括:`AdaptyUIBuilderLogic` 中的 `@Sendable` 不匹配、Adapty 类型缺少 `Sendable` 一致性,或 actor 隔离错误。 Adapty pod 声明了 `s.swift_version = '6.0'`,需要使用 Swift 6 进行构建。你自己的应用代码可以继续使用 Swift 5——只有 Adapty pod 目标(`Adapty`、`AdaptyUI`、`AdaptyUIBuilder`、`AdaptyLogger`、`AdaptyPlugin`)需要以 Swift 6 构建。 最常见的原因是 `ios/Podfile` 中的 `post_install` 钩子为每个 pod target 重写了 `SWIFT_VERSION`: ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` **解决方法**:将 Adapty 的 pod target 排除在覆盖范围之外: ```ruby showLineNumbers title="ios/Podfile" post_install do |installer| installer.pods_project.targets.each do |target| next if %w[Adapty AdaptyUI AdaptyUIBuilder AdaptyLogger AdaptyPlugin].include?(target.name) target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '5.9' end end end ``` 然后从 `ios/` 目录运行 `pod install` 并重新构建。 如需验证,打开 `ios/Pods/Pods.xcodeproj`,选择 `Adapty` pod 目标 → **Build Settings** → **Swift Language Version**,确认显示为 **Swift 6**。 --- # File: react-native-quickstart-paywalls --- --- title: "在 React Native SDK 中通过 Flow Builder 启用付费功能" description: "通过 Adapty Flow Builder 启用应用内购买的快速入门指南。" --- 要启用应用内购买,你需要了解三个核心概念: - [**产品**](product) – 用户可购买的一切内容(订阅、消耗型商品、永久授权) - [**流程**](adapty-flow-builder) – 向用户展示产品的屏幕序列,在无代码的 Flow Builder 中构建,SDK 通过 `getFlow` 获取。如果你更倾向于用自己的代码构建 UI,请使用付费墙代替——详见[手动实现付费墙](react-native-quickstart-manual)。 - [**版位**](placements) – 在应用中展示流程的位置和时机(例如 `main`、`onboarding`、`settings`)。你在看板中将流程绑定到版位,然后在代码中通过版位 ID 来请求它们。这样可以轻松运行 A/B 测试,并向不同用户展示不同的流程。 Adapty 为您提供三种在应用中开启内购的方式。请根据您的应用需求选择其中一种: | 实现方式 | 复杂度 | 使用场景 | |---|---|---| | Adapty Flow Builder | ✅ 简单 | 你[在无代码编辑工具中创建完整的、可购买的流程](quickstart-paywalls)。Adapty 自动渲染并处理所有复杂的购买流程、收据验证和订阅管理。 | | 手动创建付费墙 | 🟡 中等 | 你在应用代码中实现付费墙 UI,但仍从 Adapty 获取 flow 对象,以保持产品供给的灵活性。参见[指南](react-native-quickstart-manual)。 | | 观察者模式 | 🔴 复杂 | 你已有自己的购买处理基础设施并希望继续使用。请注意,观察者模式在 Adapty 中存在一定限制。参见[文章](observer-vs-full-mode)。 | :::important **以下步骤说明如何实现在 Adapty Flow Builder 中创建的流程。** 如果你更倾向于自行构建付费墙 UI,请参阅[手动实现付费墙](react-native-quickstart-manual)。 ::: 要显示在 Adapty Flow Builder 中创建的流程,在你的应用代码中,只需完成以下操作: 1. **获取流程**:从 Adapty 获取流程。 2. **展示流程,Adapty 将自动处理购买**:在应用中显示该视图。 3. **处理按钮操作**:将用户交互与应用的响应关联起来。例如,当用户点击按钮时打开链接或关闭流程。 ## 开始之前 \{#before-you-start\} 在开始之前,请先完成以下步骤: 1. 在 Adapty 看板中将您的应用连接到 [App Store](initial_ios) 和/或 [Google Play](initial-android)。 2. 在 Adapty 中[创建产品](create-product)。 3. [创建流程并将产品添加到其中](create-paywall)。 4. [创建版位并将流程添加到其中](create-placement)。 5. 在您的应用代码中[安装并激活 Adapty SDK](sdk-installation-reactnative)。本指南使用 Adapty React Native SDK v4 API。 ## 1. 获取流程 \{#1-get-the-flow\} 你的流程与在看板中配置的版位相关联。版位允许你为不同的目标受众运行不同的流程,或进行 [A/B 测试](ab-tests)。 要获取在 Adapty 付费墙编辑工具中创建的流程,请通过 `getFlow` 方法,使用[版位](placements) ID 获取 `flow` 对象。该流程包含显示所需的 UI 元素和样式。 ```typescript showLineNumbers title="React Native" try { const flow = await adapty.getFlow('YOUR_PLACEMENT_ID'); // the requested flow } catch (error) { // handle the error } ``` ## 2. 展示流程 \{#display-the-flow\} 现在,当你已经获取到流程后,只需添加几行代码即可展示它。 要将流程嵌入现有的组件树中,可以直接在 React Native 组件层级中使用 `AdaptyFlowView` 组件: ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); return ( ); } ``` 要将流程显示为独立屏幕,请使用 `createFlowView` 方法创建一个 `view`,设置其事件处理程序,然后调用 `view.present()`。每个 `view` 只能使用一次。如果需要再次显示该流程,请再次调用 `createFlowView` 以创建新的 `view` 实例。 ```typescript showLineNumbers title="React Native" try { const view = await createFlowView(flow); view.setEventHandlers({ onPurchaseCompleted(result, product) { return result.type !== 'user_cancelled'; }, }); await view.present(); } catch (error) { // handle the error } ``` :::tip 有关如何展示流程的更多详情,请参阅我们的[指南](react-native-present-paywalls)。 ::: ## 3. 处理按钮操作 \{#handle-button-actions\} 当用户点击流程中的按钮时,React Native SDK 会自动处理购买、恢复购买、关闭流程以及打开 URL 等操作。 但是,其他按钮具有自定义或预定义的 ID,需要在代码中处理相应操作。或者,你可能希望覆盖其默认行为。 例如,以下是关闭按钮的默认行为。你无需在代码中添加它,但这里展示了如何在需要时实现。 对于 React 组件,直接在 `AdaptyFlowView` 组件中处理操作: ```typescript showLineNumbers title="React Native (TSX)" function MyFlow({ flow }) { const onCloseButtonPress = useCallback( () => true, // allow the flow to close [], ); const onCustomAction = useCallback( (actionId) => false, [], ); return ( ); } ``` 对于模态呈现,使用 `setEventHandlers` 实现事件处理程序: ```typescript showLineNumbers title="React Native" const unsubscribe = view.setEventHandlers({ onCloseButtonPress() { return true; // allow the flow to close }, }); ``` :::tip 阅读我们关于如何处理按钮[操作](react-native-handle-paywall-actions)和[事件](react-native-handling-events-1)的指南。 ::: ## 后续步骤 \{#next-steps\} :::tip 有疑问或遇到问题?欢迎访问我们的[支持论坛](https://adapty.featurebase.app/),在那里你可以找到常见问题的解答,也可以提出自己的问题。我们的团队和社区随时为你提供帮助! ::: 你的流程已准备好在应用中展示。[测试购买](react-native-test),确保可以在流程中完成测试购买。 接下来,你需要[检查用户的访问等级](react-native-check-subscription-status),以确保向正确的用户展示流程或开放付费功能。 ## 完整示例 \{#full-example\} 以下是将本指南中所有步骤整合到应用中的完整示例。 ```javascript showLineNumbers title="React Native (TSX)" export default function FlowScreen() { const [flow, setFlow] = useState(null); const loadFlow = async () => { try { const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID'); setFlow(flowData); } catch (error) { console.warn('Error loading flow:', error); } }; const onCloseButtonPress = useCallback( () => true, [], ); const onPurchaseCompleted = useCallback( (result, product) => result.type !== 'user_cancelled', [], ); useEffect(() => { loadFlow(); }, []); return ( {flow ? ( ) : (