---
title: "在 React Native SDK 中渲染通过远程配置设计的付费墙"
description: "了解如何在 Adapty React Native SDK 中展示远程配置付费墙，以个性化用户体验。"
---

如果您使用远程配置自定义了付费墙，则需要在移动应用代码中实现渲染逻辑，以便向用户展示该付费墙。由于远程配置可以灵活满足您的需求，您可以完全控制付费墙的内容及其外观。我们提供了获取远程配置的方法，让您能够自主展示通过远程配置设置的自定义付费墙。

## 获取付费墙远程配置并展示 \{#get-paywall-remote-config-and-present-it\}

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

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

当您获取到所有必要的值之后，接下来需要将这些值渲染并组合成一个视觉上美观的页面。请确保设计能够适配各种手机屏幕尺寸和方向，为不同设备上的用户提供流畅且友好的体验。

:::warning
请确保按照下文所述[记录付费墙查看事件](present-remote-config-paywalls-react-native#track-paywall-view-events)，以便 Adapty 分析系统能够捕获漏斗和 A/B 测试所需的数据。
:::

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

我们建议[创建一个备用付费墙（即备用付费墙）](react-native-use-fallback-paywalls)。当用户没有网络连接或无可用缓存时，该备用付费墙将展示给用户，确保在这些情况下仍能提供流畅的体验。

## 追踪付费墙查看事件 \{#track-paywall-view-events\}

Adapty 可帮助您衡量付费墙的表现。我们会自动收集购买数据，但付费墙查看事件的记录需要您来完成，因为只有您才知道用户何时看到了付费墙。

要记录付费墙查看事件，只需调用 `.logShowPaywall(paywall)` 方法，该事件将反映在漏斗和 A/B 测试的付费墙数据图表中。

:::important
如果您展示的是通过[付费墙编辑工具](adapty-paywall-builder)创建的付费墙，则无需调用 `.logShowPaywall(paywall)`。
:::

```typescript showLineNumbers
await adapty.logShowPaywall(paywall);
```

请求参数：

| 参数        | 是否必填 | 描述                                                                                        |
| :---------- | :------- |:--------------------------------------------------------------------------------------------|
| **paywall** | 必填     | 一个 [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) 对象。      |