Tối ưu hóa việc tải flow & paywall trong React Native SDK

Một lần tải flow hoặc paywall đáng tin cậy trên React Native cần đảm bảo ba điều: hiển thị nhanh, trả về đúng biến thể theo đối tượng, và xử lý dự phòng hợp lý khi mạng chậm. Các quy tắc dưới đây bao gồm thời điểm tải, caching và các mẫu fallback để đạt được điều đó.

Tip

Các quy tắc này giả định rằng adapty.activate() và adapty.identify() đã được resolve xong. Xem Thứ tự gọi trong React Native SDK.

Quy tắc và những lỗi thường gặp

Làm điều này	Không làm điều này	Lý do
Lấy placement bạn sắp hiển thị.	Tải trước tất cả các placement đồng thời khi khởi động.	Tải trước hàng loạt sẽ chặn luồng JS và tạo màn hình đen trong khoảng thời gian đó.
Gọi `getFlow` sau khi attribution đã có thời gian để xử lý — ví dụ, 1–2 giây sau `activate` hoặc sau khi `onLatestProfileLoad` kích hoạt.	Gọi `getFlow` tại thành phần gốc khi mount.	Attribution chưa được xử lý xong. Flow sẽ được giải quyết theo đối tượng mặc định và âm thầm bỏ qua các phân khúc cũng như cá nhân hóa ASA.
Đặt `loadTimeoutMs` và cấu hình paywall dự phòng cho mỗi placement.	Chờ `getFlow` vô thời hạn.	Nếu không có timeout, người dùng với kết nối kém sẽ thấy màn hình trắng cho đến khi mạng phản hồi — hoặc tắt ứng dụng.

Xem Lấy paywall và sản phẩm để tham khảo các tham số fetchPolicy và loadTimeoutMs, và Placements để chọn placement phù hợp.

Hiển thị media màn hình đầu tiên từ app bundle

Một flow tải hình ảnh và video từ Adapty. Để hiển thị media của màn hình đầu tiên ngay lập tức, hãy phục vụ nó từ app bundle thay thế. Đây là cách tốt để tái sử dụng media bạn đã có sẵn, chẳng hạn như hình ảnh của một onboarding gốc hiện có.

Trong Flow & Paywall Builder, đặt custom media ID cho hình ảnh hoặc video. File bạn tải lên đó sẽ là fallback.
Thêm file vào các dự án native: bundle ứng dụng iOS và thư mục assets của Android.
Khi tạo flow view, truyền file đã đóng gói cho ID đó trong customAssets:

// "welcome_video" is the custom media ID set in the Flow & Paywall Builder
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

Các file đóng gói sẽ tăng kích thước tải xuống của app, vì vậy chỉ nên đóng gói những media người dùng nhìn thấy đầu tiên.

Những media bạn không đóng gói vẫn hiển thị ngay lập tức: layout của flow chứa sẵn một bản sao độ phân giải thấp của từng ảnh, bao gồm cả khung tĩnh của video, và hiển thị bản đó cho đến khi file đầy đủ tải xong.

Để xem toàn bộ tài liệu tham khảo về customAssets, xem Tùy chỉnh assets.

Tối ưu cho kết nối kém

Đối với các thị trường có kết nối kém liên tục (khu vực nông thôn, phương tiện giao thông, vùng bị ảnh hưởng bởi định tuyến mạng):

Đặt fetchPolicy: 'return_cache_data_else_load' cho mọi lần fetch ngoại trừ lần đầu tiên.
Cấu hình paywall dự phòng cho mọi placement trong Adapty Dashboard.
Đặt loadTimeoutMs từ 3–5 giây và chấp nhận paywall dự phòng khi hết thời gian chờ.
Không chặn việc hiển thị flow vào kết quả của getProfile(). Gọi getFlow độc lập để tránh trường hợp profile chậm làm chặn giao diện.