在 React Native SDK 中响应按钮操作

如果您使用 Adapty 付费墙编辑工具构建付费墙，正确配置按钮至关重要：

在付费墙编辑工具中添加按钮，并为其分配预设操作或创建自定义操作 ID。
在应用代码中编写代码来处理您分配的每个操作。

本指南介绍如何在代码中处理自定义操作和预设操作。

仅购买、恢复购买、关闭付费墙和打开 URL 会被自动处理。 所有其他按钮操作都需要在应用代码中正确实现响应逻辑。

关闭付费墙

要添加一个可以关闭付费墙的按钮：

在付费墙编辑工具中，添加一个按钮并为其分配 Close 操作。
在应用代码中，实现一个处理 close 操作的处理器，用于关闭付费墙。

在 React Native SDK 中，close 操作默认会触发关闭付费墙。但如果需要，您可以在代码中覆盖此行为。例如，关闭一个付费墙可能会触发打开另一个付费墙。

对于 React 组件，通过各自的事件处理器 props 来处理关闭操作：

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

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

对于模态展示，实现关闭处理器：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

对于 SDK 版本 < 3.14，仅支持模态展示：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

从付费墙打开 URL

如果您想添加一组链接（例如使用条款和购买恢复），可以在付费墙编辑工具中添加一个 Link 元素，其处理方式与具有 Open URL 操作的按钮相同。

要添加一个可以从付费墙打开链接的按钮（例如使用条款或隐私政策）：

在付费墙编辑工具中，添加一个按钮，为其分配 Open URL 操作，并输入您想要打开的 URL。
在应用代码中，实现一个处理 openUrl 操作的处理器，用于在浏览器中打开接收到的 URL。

在 React Native SDK 中，openUrl 操作默认会触发打开 URL。但如果需要，您可以在代码中覆盖此行为。

对于 React 组件，通过事件处理器 prop 来处理 URL 打开：

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

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

对于模态展示，实现 URL 处理器：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});

对于 SDK 版本 < 3.14，仅支持模态展示：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});

登录应用

要添加一个让用户登录应用的按钮：

在付费墙编辑工具中，添加一个按钮并为其分配 Login 操作。
在应用代码中，实现一个处理 login 操作的处理器，用于识别您的用户。

对于 React 组件，通过事件处理器 prop 来处理登录：

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

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

对于模态展示，实现登录处理器：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});

对于 SDK 版本 < 3.14，仅支持模态展示：

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

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});

处理自定义操作

要添加一个处理其他任意操作的按钮：

在付费墙编辑工具中，添加一个按钮，为其分配 Custom 操作，并指定一个 ID。
在应用代码中，实现一个处理您创建的操作 ID 的处理器。

例如，如果您有另一组订阅套餐或一次性购买，可以添加一个按钮来显示另一个付费墙：

对于 React 组件，通过事件处理器 prop 来处理自定义操作：

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

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

对于模态展示，实现自定义操作处理器：

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});

对于 SDK 版本 < 3.14，仅支持模态展示：

const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});