在 Expo 项目中使用备用付费墙

为了保持流畅的用户体验,请务必为您的流程、付费墙用户引导设置备用方案。这一预防措施可以在网络部分或完全中断时,确保应用仍能正常运行。

  • 若应用无法访问 Adapty 服务器:

    应用可以显示备用流程或付费墙,并读取本地的用户引导配置。

  • 若应用无法访问互联网:

    应用可以显示备用流程或付费墙。用户引导包含远程内容,需要联网才能正常使用。

在按照本指南操作之前,请先从 Adapty 下载备用配置文件。

在 Expo 项目中使用备用付费墙

在 Expo 中,你无法直接修改原生的 ios/android/ 目录,因为它们是由 expo prebuild 生成的。因此,你需要使用 react-native-adapty 提供的 config plugin 来添加备用付费墙文件。

第一步:下载备用付费墙文件

  1. 打开 Adapty 看板,进入 Paywalls 页面。
  2. 选择你想使用的付费墙,点击 Download fallback 下载备用付费墙文件。
  3. 将下载的文件保存到项目目录中,例如 assets/fallback_ios.jsonassets/fallback_android.json

第二步:配置 config plugin

app.jsonapp.config.js 中,将备用付费墙文件路径传入 react-native-adapty 的 config plugin:

{
  "expo": {
    "plugins": [
      [
        "react-native-adapty",
        {
          "ios": {
            "fallbackPaywall": "./assets/fallback_ios.json"
          },
          "android": {
            "fallbackPaywall": "./assets/fallback_android.json"
          }
        }
      ]
    ]
  }
}

第三步:在代码中使用备用付费墙

通过 config plugin 配置后,备用付费墙文件会在 expo prebuild 时自动复制到对应的原生目录。你只需在代码中调用 setFallbackPaywalls 方法,并传入对应的文件引用即可。

对于 iOS,使用 require 引用文件:


await adapty.setFallbackPaywalls(require('./assets/fallback_ios.json'));

对于 Android,同样使用 require


await adapty.setFallbackPaywalls(require('./assets/fallback_android.json'));

如果你在同一份代码中同时支持 iOS 和 Android,可以使用 Platform.select 来区分:


const fallback = Platform.select({
  ios: require('./assets/fallback_ios.json'),
  android: require('./assets/fallback_android.json'),
});

await adapty.setFallbackPaywalls(fallback);

本指南适用于 Expo 项目。 如果你使用的是纯 React Native(非 Expo),请参阅纯 React Native 备用付费墙指南

为了保持流畅的用户体验,请务必为您的流程、付费墙用户引导设置备用方案。这一预防措施可以在网络部分或完全中断时,确保应用仍能正常运行。

  • 若应用无法访问 Adapty 服务器:

    应用可以显示备用流程或付费墙,并读取本地的用户引导配置。

  • 若应用无法访问互联网:

    应用可以显示备用流程或付费墙。用户引导包含远程内容,需要联网才能正常使用。

在按照本指南操作之前,请先从 Adapty 下载备用配置文件。

Adapty SDK 从原生包中读取备用文件——iOS 资源存放在 .app 包内,Android 条目位于 android/app/src/main/assets/ 下。在 Expo 项目中,npx expo prebuild --clean 每次运行都会重新生成这些目录,因此无法手动将文件放入其中。react-native-adapty 配置插件会自动将文件注入原生包。

可以在 FocusJournalExpo 示例应用中查看完整的可运行示例。

配置

  1. 将备用付费墙 JSON 文件放置在项目中的任意位置——通常与其他资源文件放在一起:

    <your-project>/
    └── assets/
        ├── ios_fallback.json
        └── android_fallback.json
  2. app.json(或 app.config.js)的 react-native-adapty 条目中添加 fallbackFile 选项。每个平台键均为可选项——只需配置你需要的平台即可:

   {
     "expo": {
       "plugins": [
         [
           "react-native-adapty",
           {
             "fallbackFile": {
               "ios": "./assets/ios_fallback.json",
               "android": "./assets/android_fallback.json"
             }
           }
         ]
       ]
     }
   }

Adapty 为每个平台导出不同的备用付费墙 JSON 文件——iOS 使用 Apple 产品 ID,Android 使用 Google Play 产品 ID。请将每个平台指向各自对应的文件。

  1. 重新生成原生项目:
   npx expo prebuild

该插件会将 iOS 文件添加到 Xcode 项目的 bundle 资源中,并将 Android 文件复制到 android/app/src/main/assets/。预构建输出包含如下内容:

[react-native-adapty] Registered ios_fallback.json as iOS bundle resource
[react-native-adapty] Copied android_fallback.json to android assets/
  1. 在运行时向 SDK 注册该文件:

    import { adapty } from 'react-native-adapty';
    
    await adapty.activate('PUBLIC_SDK_KEY');
  await adapty.setFallback({
     ios: { fileName: 'ios_fallback.json' },
     android: { relativeAssetPath: 'android_fallback.json' },
   });

传递给 setFallback 的文件名必须与 fallbackFile 中配置的文件基本名称一致。

setFallback 必须在 SDK 获取任何付费墙或用户引导之前运行。

验证

运行 npx expo prebuild 后,检查两个平台:

  • Android:列出 android/app/src/main/assets/ 的内容。fallbackFile.android 配置的文件应该存在,且仅适用于 iOS 的文件名不应出现在这里。
  • iOS:在 ios/<ProjectName>.xcodeproj/project.pbxproj 中搜索 iOS 文件名。它应出现在 PBXFileReferenceResources 组和 PBXResourcesBuildPhase 中。仅适用于 Android 的文件名不应出现在 project.pbxproj 中。