---
title: "在 Observer 模式下展示流程 - React Native"
description: "在 React Native 应用中以 Observer 模式展示流程和付费墙编辑工具构建的付费墙，同时使用自己的代码处理购买逻辑。"
---

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

:::warning
本节仅适用于[观察者模式](observer-vs-full-mode)。如果您不使用观察者模式，请参阅[展示流程与付费墙](react-native-present-paywalls)主题。
:::

:::info
此功能需要 Adapty React Native SDK 4.0 或更高版本——此前该功能仅在原生 iOS 和 Android SDK 中可用。请参阅[迁移指南](migration-to-react-native-sdk-v4)进行升级。
:::

<details>
   <summary>开始展示流程前的准备工作（点击展开）</summary>

1. 完成 Adapty [与 App Store](initial_ios) 和 [与 Google Play](initial-android) 的初始集成。
   2. 安装并配置 Adapty SDK，务必将 `observerMode` 参数设置为 `true`。请参阅 [React Native SDK 安装指南](sdk-installation-reactnative)。
   3. 在 Adapty 看板中[创建产品](create-product)。
   4. [在编辑工具中配置流程或付费墙](create-paywall)，并为其分配产品。
   5. [创建版位并将流程或付费墙分配到对应版位](create-placement)。
   6. 在移动应用代码中[获取流程及其配置](react-native-get-pb-paywalls)。

</details>

在 Observer 模式下，SDK 不会替你发起购买。当用户在 Adapty 渲染的流程或付费墙中点击购买或恢复按钮时，SDK 会调用你的 `onObserverPurchaseInitiated` 或 `onObserverRestoreInitiated` 事件处理器——请在其中使用你自己的代码完成购买或恢复操作。

## 设置观察者模式事件处理器 \{#set-the-observer-mode-event-handlers\}

与其他平台不同，这里没有单独的解析器对象——处理器是常规[事件处理器](react-native-handling-events-1)的一部分，因此需要在每个展示的流程中进行设置。

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

对于 React 组件，将处理器作为 props 传递给 `AdaptyFlowView`：

```typescript showLineNumbers title="React Native (TSX)"

function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}
```

:::note
在嵌入式组件中，处理程序的返回值不会关闭流程——请在成功购买或恢复后自行卸载组件。
:::

</TabItem>
<TabItem value="standalone" label="Modal presentation">

对于模态展示，在你创建的视图上设置处理程序：

```typescript showLineNumbers title="React Native (TSX)"

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
    return false; // keep the flow open; dismiss it yourself after success
  },
  onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
    return false;
  },
});
```

</TabItem>
</Tabs>

`onObserverPurchaseInitiated` 处理器会通知你用户已发起购买，`onObserverRestoreInitiated` 则通知用户已发起恢复。收到通知后，触发你自定义的购买或恢复流程。

此外，请记得调用以下回调函数，以便将购买或恢复的进度通知给 AdaptyUI。这对于流程的正常运行（例如显示加载状态等）是必要的：

| 回调                 | 描述                                              |
| :----------------- | :------------------------------------------------------------------------------- |
| onStartPurchase()  | 应调用此回调以通知 AdaptyUI 购买已开始。  |
| onFinishPurchase() | 应调用此回调以通知 AdaptyUI 购买已完成。 |
| onStartRestore()   | 应调用此回调以通知 AdaptyUI 恢复购买已开始。   |
| onFinishRestore()  | 应调用此回调以通知 AdaptyUI 恢复购买已完成。  |

## 展示流程 \{#present-the-flow\}

像往常一样展示流程：[获取流程并创建其视图](react-native-get-pb-paywalls)，然后[展示它](react-native-present-paywalls)。无需额外参数——只有当 SDK 以 `observerMode: true` 激活时，相应的处理程序才会触发。

:::warning
别忘了[上报交易并将其与付费墙关联](report-transactions-observer-mode-react-native)。否则，Adapty 将无法识别该交易，也无法确定购买来源的付费墙。
:::