在 Observer 模式下展示流程 - React Native
如果你已使用编辑工具自定义了流程或付费墙，则无需在移动端代码中手动渲染即可将其展示给用户。此类流程或付费墙已同时包含展示内容和展示方式的完整配置。
此功能需要 Adapty React Native SDK 4.0 或更高版本——此前该功能仅在原生 iOS 和 Android SDK 中可用。请参阅迁移指南进行升级。
开始展示流程前的准备工作（点击展开）
- 完成 Adapty 与 App Store 和 与 Google Play 的初始集成。
2. 安装并配置 Adapty SDK，务必将
observerMode 参数设置为 true。请参阅 React Native SDK 安装指南。
3. 在 Adapty 看板中创建产品。
4. 在编辑工具中配置流程或付费墙，并为其分配产品。
5. 创建版位并将流程或付费墙分配到对应版位。
6. 在移动应用代码中获取流程及其配置。
在 Observer 模式下，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
/>
);
}
在嵌入式组件中，处理程序的返回值不会关闭流程——请在成功购买或恢复后自行卸载组件。
对于模态展示，在你创建的视图上设置处理程序：
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 激活时，相应的处理程序才会触发。
