ÿÿ Migrating to Adapty React Native SDK v3.14 | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Migrate Adapty React Native SDK to v3.14

Adapty React Native SDK 3.14.0 là một bản phát hành lớn với các cải tiến yêu cầu bạn thực hiện các bước migration:

  • PhÆ°Æ¡ng thức registerEventHandlers đã được thay thế bằng phÆ°Æ¡ng thức setEventHandlers.
  • Trong AdaptyOnboardingView, các event handler giỠđược truyá»n dÆ°á»›i dạng các prop riêng lẻ thay vì má»™t object eventHandlers
  • Má»™t kiểu import má»›i, Ä‘Æ¡n giản hÆ¡n đã được giá»›i thiệu cho các UI component
  • PhÆ°Æ¡ng thức logShowOnboarding đã bị xóa
  • Phiên bản React Native tối thiểu đã được cập nhật lên 0.73.0
  • Style trình bày iOS mặc định cho paywall và onboarding đã thay đổi từ page sheet sang full screen

Thay thế registerEventHandlers bằng setEventHandlers

Phương thức registerEventHandlers dùng để làm việc với Adapty Paywall và Onboarding Builder đã được thay thế bằng phương thức setEventHandlers. Nếu bạn đang dùng Adapty Paywall Builder và/hoặc Adapty Onboarding Builder, hãy tìm registerEventHandlers trong code của bạn và thay thế bằng setEventHandlers.

Thay đổi này được thá»±c hiện để làm rõ hÆ¡n hành vi của phÆ°Æ¡ng thức: Các handler giá» hoạt Ä‘á»™ng lần lượt vì má»—i handler trả vá» true/false, và việc có nhiá»u handler cho má»™t sá»± kiện khiến hành vi kết quả không rõ ràng.

LÆ°u ý rằng khi sá»­ dụng các React component nhÆ° AdaptyOnboardingView hoặc AdaptyPaywallView, bạn không cần trả vá» true/false từ các event handler vì bạn kiểm soát khả năng hiển thị của component thông qua state management của riêng mình. Giá trị trả vá» chỉ cần thiết khi trình bày màn hình modal, nÆ¡i SDK quản lý vòng Ä‘á»i của view.

Gá»i setEventHandlers nhiá»u lần sẽ ghi đè các handler bạn cung cấp, thay thế cả handler mặc định lẫn các handler đã được đặt trÆ°á»›c đó cho những sá»± kiện cụ thể đó.

- const unsubscribe = view.registerEventHandlers({
-    // your event handlers
- })

 const unsubscribe = view.setEventHandlers({
    // your event handlers
 })

Cập nhật Ä‘Æ°á»ng dẫn import cho UI component

Adapty SDK 3.14.0 giới thiệu kiểu import đơn giản hơn cho các UI component. Thay vì import từ react-native-adapty/dist/ui, giỠbạn có thể import trực tiếp từ react-native-adapty.

Kiểu import má»›i nhất quán hÆ¡n vá»›i các thông lệ React Native tiêu chuẩn và giúp các câu lệnh import gá»n gàng hÆ¡n. Nếu bạn Ä‘ang sá»­ dụng các UI component nhÆ° AdaptyPaywallView hoặc AdaptyOnboardingView, hãy cập nhật các import nhÆ° bên dÆ°á»›i:

- import { AdaptyPaywallView } from 'react-native-adapty/dist/ui';
+ import { AdaptyPaywallView } from 'react-native-adapty';

- import { AdaptyOnboardingView } from 'react-native-adapty/dist/ui';
+ import { AdaptyOnboardingView } from 'react-native-adapty';

- import { createPaywallView } from 'react-native-adapty/dist/ui';
+ import { createPaywallView } from 'react-native-adapty';

- import { createOnboardingView } from 'react-native-adapty/dist/ui';
+ import { createOnboardingView } from 'react-native-adapty';

Äể tÆ°Æ¡ng thích ngược, kiểu import cÅ© (react-native-adapty/dist/ui) vẫn được há»— trợ. Tuy nhiên, chúng tôi khuyến nghị sá»­ dụng kiểu import má»›i để đảm bảo tính nhất quán và rõ ràng.

Cập nhật event handler của onboarding trong React component

Các event handler cho onboarding đã được chuyển ra khá»i object eventHandlers trong AdaptyOnboardingView. Nếu bạn Ä‘ang hiển thị onboarding bằng AdaptyOnboardingView, hãy cập nhật cấu trúc xá»­ lý sá»± kiện.

LÆ°u ý cách chúng tôi khuyến nghị triển khai các event handler. Äể tránh tạo lại object má»—i lần render, hãy sá»­ dụng useCallback cho các hàm xá»­ lý sá»± kiện.

 import React, { useCallback } from 'react';
- import { AdaptyOnboardingView } from 'react-native-adapty/dist/ui';
+ import { AdaptyOnboardingView } from 'react-native-adapty';
+ import type { OnboardingEventHandlers } from 'react-native-adapty';
+
+ function MyOnboarding({ onboarding }) {
+   const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
+   const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
+   const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
+   const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
+   const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
+   const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
+   const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);
+
   return (
     <AdaptyOnboardingView
       onboarding={onboarding}
       style={styles.container}
-       eventHandlers={{
-         onAnalytics(event, meta) { /* ... */ },
-         onClose(actionId, meta) { /* ... */ },
-         onCustom(actionId, meta) { /* ... */ },
-         onPaywall(actionId, meta) { /* ... */ },
-         onStateUpdated(action, meta) { /* ... */ },
-         onFinishedLoading(meta) { /* ... */ },
-         onError(error) { /* ... */ },
-       }}
+       onAnalytics={onAnalytics}
+       onClose={onClose}
+       onCustom={onCustom}
+       onPaywall={onPaywall}
+       onStateUpdated={onStateUpdated}
+       onFinishedLoading={onFinishedLoading}
+       onError={onError}
     />
   );
+ }

Äể tÆ°Æ¡ng thích ngược, prop eventHandlers vẫn được há»— trợ nhÆ°ng đã bị deprecated. Chúng tôi khuyến nghị migrate sang các prop event handler riêng lẻ nhÆ° minh há»a ở trên.

Xóa logShowOnboarding

Trong Adapty SDK 3.14.0, chúng tôi đã xóa phÆ°Æ¡ng thức logShowOnboarding khá»i SDK. Nếu bạn đã sá»­ dụng phÆ°Æ¡ng thức này, nó sẽ không còn khả dụng khi bạn nâng cấp SDK lên phiên bản 3.14 trở lên.

Thay vào đó, bạn có thể tạo onboarding trong Adapty no-code onboarding builder. Analytics cho các onboarding này được theo dõi tá»± Ä‘á»™ng và bạn có nhiá»u tùy chá»n tùy chỉnh.

Cập nhật React Native

Kể từ Adapty SDK 3.14.0, phiên bản React Native tối thiểu được hỗ trợ là 0.73.0. Nếu bạn đang dùng phiên bản cũ hơn, hãy cập nhật React Native lên phiên bản 0.73.0 trở lên để trải nghiệm với Adapty SDK được nhất quán và ổn định.

Cập nhật iOS presentation style cho paywall và onboarding modal

Trong Adapty SDK 3.14.0, style trình bày iOS mặc định cho paywall và onboarding hiển thị bằng phương thức view.present() đã thay đổi từ page sheet sang full screen.

Nếu bạn muốn giữ style page sheet nhÆ° trÆ°á»›c, hãy truyá»n tham số iosPresentationStyle vào phÆ°Æ¡ng thức present():

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}
ÿÿÿÿ