在 React Native SDK 中渲染远程配置设计的付费墙

如果你使用远程配置自定义了流程，则需要在移动应用代码中实现渲染逻辑，才能将其展示给用户。由于远程配置的灵活性完全由你掌控，你可以自由决定包含哪些内容以及流程视图的呈现方式。我们提供了一个获取远程配置的方法，让你能够自主展示通过远程配置设置的自定义流程。

获取 flow 远程配置并展示

在 v4 中，每个 flow 的 remoteConfigs 数组中，每种已配置语言对应一个 AdaptyRemoteConfig 条目。选择与用户偏好匹配的语言，然后从其 data 中读取所需的值。

try {
  const flow = await adapty.getFlow("YOUR_PLACEMENT_ID");
  const config = flow.remoteConfigs?.find((c) => c.lang === "en")
    ?? flow.remoteConfigs?.[0];
  const headerText = config?.data?.["header_text"];
} catch (error) {
  // handle the error
}

现在，您已获取所有必要的值，接下来需要将它们渲染并组装成一个美观的页面。请确保设计能够适配各种手机屏幕尺寸和方向，为不同设备的用户提供流畅且友好的体验。

请务必按照以下说明记录付费墙展示事件，以便 Adapty 分析系统能够采集漏斗和 A/B 测试所需的数据。

在完成流程展示后，继续设置购买流程。当用户发起购买时，只需使用流程中的产品调用 .makePurchase() 方法。有关 .makePurchase() 方法的详细信息，请参阅发起购买。

我们建议创建一个备用付费墙（即备用付费墙）。当用户没有网络连接或缓存不可用时，此备用付费墙将自动展示给用户，确保在这些情况下依然提供流畅的体验。

追踪付费墙查看事件

Adapty 帮助你衡量流程的效果。购买数据会自动收集，但流程查看事件需要你手动记录，因为只有你知道用户何时看到了流程。

要记录流程查看事件，只需调用 .logShowFlow(flow)，该事件将反映在付费墙漏斗和 A/B 测试的数据指标中。

如果你通过 Flow Builder 或付费墙编辑工具渲染流程或付费墙，无需调用 .logShowFlow(flow)。Adapty 在这些情况下会自动追踪展示次数。

await adapty.logShowFlow(flow);

请求参数：

参数	是否必填	描述
flow	必填	通过 `adapty.getFlow(placementId)` 获取的 `AdaptyFlow` 对象。

如果您通过远程配置自定义了付费墙，则需要在移动应用的代码中实现渲染逻辑，才能将其展示给用户。由于远程配置的灵活性完全由您掌控，付费墙视图的内容和样式都取决于您的设计。我们提供了一个获取远程配置的方法，让您能够自主展示通过远程配置设置的自定义付费墙。

获取付费墙远程配置并展示

要获取付费墙的远程配置，请访问 remoteConfig 属性并提取所需的值。

try {
  const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
  const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
  // handle the error
}

至此，获取所有必要的值后，就可以开始渲染并将它们组合成一个视觉上美观的页面了。确保设计能够适配各种移动设备屏幕和屏幕方向，在不同设备上提供流畅且友好的用户体验。

请务必按照以下说明记录付费墙查看事件，以便 Adapty 分析系统能够收集漏斗和 A/B 测试所需的数据。

在展示付费墙之后，继续设置购买流程。当用户发起购买时，只需使用付费墙中的产品调用 .makePurchase() 即可。有关 .makePurchase() 方法的详细信息，请参阅发起购买。

我们建议创建一个备用付费墙。当用户没有网络连接或缓存不可用时，该备用付费墙将会展示给用户，确保在这些情况下仍能提供流畅的体验。

追踪付费墙浏览事件

Adapty 帮助你衡量付费墙的表现。购买数据会自动收集，但付费墙浏览事件需要你手动记录，因为只有你知道用户何时看到了付费墙。

要记录付费墙浏览事件，只需调用 .logShowPaywall(paywall)，该事件将反映在漏斗和 A/B 测试的付费墙数据指标中。

如果你使用付费墙编辑工具创建付费墙，则无需调用 .logShowPaywall(paywall)。

await adapty.logShowPaywall(paywall);

请求参数：

参数	是否必填	描述
paywall	必填	一个 `AdaptyPaywall` 对象。