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

如果你已使用付费墙编辑工具自定义了付费墙，则无需在移动应用代码中手动渲染，即可将其展示给用户。此类付费墙已包含展示内容及展示方式的完整配置。

开始之前，请确认：

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

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

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

• 模态展示

React 组件

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

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 实例。

const view = await createPaywallView(paywall);

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

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

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 参数。

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>

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