在观察者模式下展示流程 - React Native
如果你使用的是观察者模式，则需要自行处理购买逻辑。但你可以将付费墙 UI 委托给流程与付费墙编辑工具来管理。
在编辑工具中设计界面，Adapty SDK 负责原生渲染。随时更新文案、布局和价格，无需发布新版本。
本指南介绍如何展示流程并处理购买回调。如果由 Adapty 代为完成购买，请参阅展示流程与付费墙。
开始之前
你需要：
在观察者模式下，SDK 不会代替您执行购买操作。当用户在 Adapty 渲染的流程中点击购买或恢复按钮时，SDK 会调用您的 onObserverPurchaseInitiated 或 onObserverRestoreInitiated 事件处理器——请在其中使用您自己的代码完成购买或恢复操作。
设置观察者模式事件处理器
与其他平台不同，这里没有单独的解析器对象——处理器是常规事件处理器的一部分，因此需要在每个展示的流程中进行设置。
对于 React 组件，将处理器作为 props 传递给 AdaptyFlowView：
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
在嵌入式组件中，处理程序的返回值不会关闭流程——请在成功购买或恢复后自行卸载组件。
对于模态展示，在你创建的视图上设置处理程序：
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;
},
});
onObserverPurchaseInitiated 处理器会通知你用户已发起购买，onObserverRestoreInitiated 则通知用户已发起恢复。收到通知后，触发你自定义的购买或恢复流程。
此外，请记得调用以下回调函数，以便将购买或恢复的进度通知给 AdaptyUI。这对于流程的正常运行（例如显示加载状态等）是必要的：
| 回调 | 描述 |
|---|
| onStartPurchase() | 应调用此回调以通知 AdaptyUI 购买已开始。 |
| onFinishPurchase() | 应调用此回调以通知 AdaptyUI 购买已完成。 |
| onStartRestore() | 应调用此回调以通知 AdaptyUI 恢复购买已开始。 |
| onFinishRestore() | 应调用此回调以通知 AdaptyUI 恢复购买已完成。 |
展示流程
像往常一样展示流程：获取流程并创建其视图，然后展示它。无需额外参数——只有当 SDK 以 observerMode: true 激活时，相应的处理程序才会触发。
