ÿÿ Sá»­ dụng Fallback Flows trên React Native | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Sử dụng paywall dự phòng trong dự án Expo

Hướng dẫn này áp dụng cho các dự án Expo. Nếu bạn đang dùng React Native thuần (không dùng Expo), hãy xem hướng dẫn paywall dự phòng cho React Native thuần.

Äể duy trì trải nghiệm ngÆ°á»i dùng mượt mà, Ä‘iá»u quan trá»ng là phải thiết lập paywall dá»± phòng cho các flow, paywall và onboarding của bạn. Biện pháp phòng ngừa này giúp mở rá»™ng khả năng của ứng dụng trong trÆ°á»ng hợp mất kết nối internet má»™t phần hoặc hoàn toàn.

  • Nếu ứng dụng không thể kết nối đến máy chủ Adapty:

    Ứng dụng vẫn có thể hiển thị flow hoặc paywall dự phòng, và truy cập cấu hình onboarding đã lưu cục bộ.

  • Nếu ứng dụng không thể kết nối internet:

    Ứng dụng vẫn có thể hiển thị flow hoặc paywall dự phòng. Onboarding chứa nội dung từ xa và cần có kết nối internet để hoạt động.

Trước khi thực hiện các bước trong hướng dẫn này, hãy tải xuống các file cấu hình dự phòng từ Adapty.

SDK Adapty Ä‘á»c file dá»± phòng từ native bundle — má»™t resource iOS bên trong gói .app, hoặc má»™t mục trong android/app/src/main/assets/. Trong dá»± án Expo, npx expo prebuild --clean sẽ tái tạo các thÆ° mục đó má»—i lần chạy, vì vậy bạn không thể thêm file thủ công. Config plugin của react-native-adapty sẽ tá»± Ä‘á»™ng tích hợp file vào native bundle cho bạn.

Một ví dụ hoạt động hoàn chỉnh có sẵn trong ứng dụng mẫu FocusJournalExpo.

Cấu hình

  1. Äặt các file JSON dá»± phòng ở bất kỳ đâu trong dá»± án — thÆ°á»ng là cạnh các asset khác:

    <your-project>/
└── assets/
    ├── ios_fallback.json
    └── android_fallback.json

  2. Thêm tùy chá»n fallbackFile vào mục react-native-adapty trong app.json (hoặc app.config.js). Má»—i key của từng ná»n tảng là tùy chá»n — chỉ cần cấu hình những ná»n tảng bạn cần:

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

Adapty xuất má»™t file JSON dá»± phòng khác nhau cho từng ná»n tảng — ID sản phẩm Apple trên iOS, ID sản phẩm Google Play trên Android. Hãy trá» má»—i ná»n tảng đến file tÆ°Æ¡ng ứng của nó.

  1. Tạo lại các native project:
   npx expo prebuild

Plugin sẽ thêm file iOS vào bundle resources của Xcode project và sao chép file Android vào android/app/src/main/assets/. Output của lệnh prebuild sẽ có các dòng như:

[react-native-adapty] Registered ios_fallback.json as iOS bundle resource
[react-native-adapty] Copied android_fallback.json to android assets/
  1. Äăng ký file vá»›i SDK lúc runtime:
   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' },
   });

Tên file truyá»n vào setFallback phải khá»›p vá»›i tên cÆ¡ sở (basename) của các file đã cấu hình trong fallbackFile.

setFallback phải chạy trước khi SDK tải flow, paywall hoặc onboarding mục tiêu.

Kiểm tra

Sau khi chạy npx expo prebuild, hãy kiểm tra cả hai platform:

  • Android: Liệt kê ná»™i dung của android/app/src/main/assets/. File đã cấu hình trong fallbackFile.android phải có mặt ở đây, và tên file chỉ dành cho iOS không được xuất hiện ở đây.
  • iOS: Tìm kiếm tên file iOS trong ios/<ProjectName>.xcodeproj/project.pbxproj. Nó phải xuất hiện trong PBXFileReference, nhóm Resources, và PBXResourcesBuildPhase. Tên file chỉ dành cho Android không được xuất hiện trong project.pbxproj.
ÿÿÿÿ