React Native - 展示新版付费墙编辑工具付费墙

如果您已使用付费墙编辑工具自定义了付费墙，则无需担心在移动应用代码中渲染它以将其展示给用户。此类付费墙同时包含应在付费墙中显示的内容以及显示方式。

开始之前，请确保：

1. 您已创建付费墙。
2. 您已将付费墙添加到版位。
3. 您已获取付费墙并准备好视图。

Adapty React Native SDK 提供两种展示付费墙的方式：

• React 组件：嵌入式组件，可将其集成到应用的架构和导航系统中。

• 模态展示

React 组件

要将付费墙嵌入现有组件树，请直接在 React Native 组件层级中使用 AdaptyPaywallView 组件。嵌入式组件可让您将其集成到应用的架构和导航系统中。

import React, { useCallback, useMemo } from 'react';
import { AdaptyPaywallView } from 'react-native-adapty';
import type { EventHandlers } from 'react-native-adapty';

function MyPaywall({ paywall }) {
  const paywallParams = useMemo(() => ({
    loadTimeoutMs: 3000,
  }), []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      params={paywallParams}
      style={styles.paywall}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onCustomAction={onCustomAction}
      onUrlPress={onUrlPress}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}

模态展示

要将付费墙作为独立屏幕展示，请对由 createPaywallView 方法创建的 view 调用 view.present() 方法。每个 view 只能使用一次。如需再次展示付费墙，请再次调用 createPaywallView 以创建新的 view 实例。

import { createPaywallView } from 'react-native-adapty';

const view = await createPaywallView(paywall);

// Optional: handle paywall events (close, purchase, restore, etc)
// view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // handle the error
}

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

const view = await createPaywallView(paywall);

view.registerEventHandlers(); // handle close press, etc

try {
  await view.present();
} catch (error) {
  // handle the error
}

配置 iOS 展示样式

通过向 present() 方法传递 iosPresentationStyle 参数来配置付费墙在 iOS 上的展示方式。该参数接受 'full_screen'（默认）或 'page_sheet' 值。

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

使用开发者自定义计时器

要在移动应用中使用开发者自定义计时器，请使用 timerId，在本例中为 CUSTOM_TIMER_NY，即您在 Adapty 看板中设置的开发者自定义计时器的 Timer ID。这可确保您的应用使用正确的值动态更新计时器——例如 13d 09h 03m 34s（计算方式为计时器的结束时间（如元旦）减去当前时间）。

const paywallParams = {
  customTimers: { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) }
};

<AdaptyPaywallView
  paywall={paywall}
  params={paywallParams}
  // ... your event handlers
/>

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

在本例中，CUSTOM_TIMER_NY 是您在 Adapty 看板中设置的开发者自定义计时器的 Timer ID。timerResolver 可确保您的应用使用正确的值动态更新计时器——例如 13d 09h 03m 34s（计算方式为计时器的结束时间（如元旦）减去当前时间）。

显示对话框

当付费墙视图在 Android 上展示时，请使用此方法代替原生警告对话框。在 Android 上，常规 RN 警告会出现在付费墙视图后方，用户无法看到。此方法可确保在所有平台上在付费墙上方正确展示对话框。

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });
  
  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

用新订阅替换现有订阅

当用户在 Android 上尝试购买新订阅而当前已有活跃订阅时，您可以通过在创建付费墙视图时传递订阅更新参数来控制新购买的处理方式。要用新订阅替换当前订阅，请在 createPaywallView 中使用 productPurchaseParams，并传入 oldSubVendorProductId 和 prorationMode 参数。

import { Platform } from 'react-native';
import { createPaywallView } from 'react-native-adapty';

const productPurchaseParams = paywall.productIdentifiers.map((productId) => {
  let params = {};
  if (Platform.OS === 'android') {
    params.android = {
      subscriptionUpdateParams: {
        oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
        prorationMode: 'with_time_proration',
      },
    };
  }
  return { productId, params };
});

const view = await createPaywallView(paywall, { productPurchaseParams });

故障排查

付费墙顶部的视觉遮罩（Android）

如果 AdaptyPaywallView 未延伸至状态栏后方，其顶部仍可能出现视觉遮罩。要移除它，请向您的应用添加以下布尔资源：

1. 前往 android/app/src/main/res/values。如果不存在 bools.xml 文件，请创建它。

2. 添加以下资源：

<resources>
    <bool name="adapty_paywall_enable_safe_area_paddings">false</bool>
</resources>

请注意，此更改将全局应用于应用中的所有付费墙。