响应流程操作 - React Native

如果你正在使用 Adapty 的 Flow Builder 或付费墙编辑工具构建流程或付费墙，正确设置按钮至关重要：

在流程/付费墙编辑工具中添加按钮，并为其分配已有操作或创建自定义操作 ID。
在应用代码中处理每个已分配的操作。

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

购买、恢复、流程/付费墙关闭以及 URL 跳转均由系统自动处理。 你可以配置这些默认行为，或为自定义操作实现相应的响应逻辑。

SDK 提供了一个 onRequestPermission 流程处理器，用于处理系统权限请求（如推送通知或相机访问权限）。目前流程尚未触发此类请求，所以暂时无需实现它。

关闭流程和付费墙

要添加一个关闭流程或付费墙的按钮：

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

在 React Native SDK 中，close 动作默认会触发关闭流程或付费墙。不过，如果需要，你可以在代码中覆盖此行为。例如，关闭一个流程时可以触发打开另一个流程。

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


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

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

对于模态展示，请实现关闭处理函数：


const view = await createFlowView(flow);

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

从流程和付费墙中打开 URL

如果你想添加一组链接（例如使用条款和购买恢复），可以在编辑工具中添加 Link 元素，并像处理带有 Open URL 操作的按钮一样处理它。

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

在编辑工具中，添加一个按钮，为其指定 Open URL 操作，并输入要打开的 URL。
在应用代码中，实现一个 openUrl 操作的处理程序，用于在浏览器中打开接收到的 URL。

在 React Native SDK 中，openUrl 动作默认会触发 URL 的打开操作。不过，你可以在代码中根据需要覆盖此行为。

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


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

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

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


const view = await createFlowView(flow);

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

处理自定义操作

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

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

例如，如果你有另一组订阅优惠或一次性购买，可以添加一个按钮来显示另一个流程或付费墙：

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


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

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

对于模态弹出形式，实现自定义操作处理程序：

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

如果你使用 Adapty 付费墙编辑工具构建付费墙，请务必正确设置按钮：

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

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

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

关闭付费墙

要为付费墙添加关闭按钮：

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

在 React Native SDK 中，close 操作默认会触发关闭付费墙。不过，如有需要，你可以在代码中覆盖这一行为。例如，关闭一个付费墙时可以触发打开另一个付费墙。

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


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}
    />
  );
}

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


const view = await createPaywallView(paywall);

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

从付费墙打开 URL

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

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

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

在 React Native SDK 中，openUrl 操作默认会触发打开 URL 的行为。不过，如有需要，你可以在代码中覆盖此行为。

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


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

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

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


const view = await createPaywallView(paywall);

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

登录应用

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

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

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


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}
    />
  );
}

对于模态展示，请实现登录处理程序：


const view = await createPaywallView(paywall);

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

处理自定义操作

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

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

例如，如果你有另一组订阅优惠或一次性购买，可以添加一个按钮来展示另一个付费墙：

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


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
        }
    },
});