---
title: "在 React Native SDK 中获取远程配置付费墙的付费墙和产品"
description: "在 Adapty React Native SDK 中获取付费墙和产品，以增强用户变现能力。"
---

在展示远程配置和自定义付费墙之前，您需要先获取相关信息。请注意，本主题涉及远程配置和自定义付费墙。有关获取付费墙编辑工具自定义付费墙的指导，请参阅[获取付费墙编辑工具付费墙及其配置](react-native-get-pb-paywalls)。

:::tip

想了解 Adapty SDK 如何集成到移动应用中的真实示例？请查看我们的[示例应用](sample-apps)，其中展示了完整的配置过程，包括显示付费墙、完成购买以及其他基本功能。

:::

<details>
   <summary>在您开始在移动应用中获取付费墙和产品之前（点击展开）</summary>

   1. 在 Adapty 看板中[创建您的产品](create-product)。

2. 在 Adapty 看板中[创建付费墙并将产品集成到付费墙中](create-paywall)。

3. 在 Adapty 看板中[创建版位并将付费墙集成到版位中](create-placement)。

4. 在您的移动应用中[安装 Adapty SDK](sdk-installation-reactnative)。
</details>

## 获取付费墙信息 \{#fetch-paywall-information\}

在 Adapty 中，[产品](product)是 App Store 和 Google Play 产品的组合。这些跨平台产品被集成到付费墙中，使您能够在特定的移动应用版位中展示它们。

要展示产品，您需要使用 `getPaywall` 方法从某个[版位](placements)中获取[付费墙](paywalls)。

:::important
**不要硬编码产品 ID。** 您唯一需要硬编码的 ID 是版位 ID。付费墙是远程配置的，因此产品数量和可用优惠随时可能发生变化。您的应用必须动态处理这些变化——如果付费墙今天返回两个产品，明天返回三个，请在无需修改代码的情况下全部展示。
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}
```

| 参数 | 是否必填 | 描述 |
|-------------------|--------|-----------|
| **placementId** | 必填 | [版位](placements)的标识符。这是您在 Adapty 看板中创建版位时指定的值。 |
| **locale** | <p>可选</p><p>默认值：`en`</p> | <p>[付费墙本地化](add-remote-config-locale)的标识符。此参数应为由一个或多个子标签组成的语言代码，子标签之间用连字符（**-**）分隔。第一个子标签表示语言，第二个子标签表示地区。</p><p></p><p>示例：`en` 表示英语，`pt-br` 表示巴西葡萄牙语。</p><p></p><p>有关语言区域代码及我们推荐使用方式的更多信息，请参阅[本地化和语言区域代码](react-native-localizations-and-locale-codes)。</p> |
| **fetchPolicy** | 默认值：`.reloadRevalidatingCacheData` | <p>默认情况下，SDK 将尝试从服务器加载数据，如果失败则返回缓存数据。我们推荐使用此选项，因为它能确保用户始终获取最新数据。</p><p></p><p>但是，如果您认为用户的网络连接不稳定，可以考虑使用 `.returnCacheDataElseLoad`，在缓存数据存在时直接返回缓存。在这种情况下，用户可能无法获取最新数据，但无论网络状况如何，加载速度都会更快。缓存会定期更新，因此在会话期间使用缓存以避免网络请求是安全的。</p><p></p><p>请注意，缓存在应用重启后仍然保留，只有在应用卸载重装或手动清除时才会被清空。</p><p></p><p>Adapty SDK 将付费墙存储在两个层级：上述定期更新的缓存和[备用付费墙](react-native-use-fallback-paywalls)。我们还使用 CDN 加速付费墙的获取，并在 CDN 不可达时提供独立的备用服务器。该系统旨在确保您始终获取最新版本的付费墙，同时在网络连接有限的情况下保证可靠性。</p> |
| **loadTimeoutMs** | 默认值：5 秒 | <p>此值限制该方法的超时时间。如果超时，将返回缓存数据或本地备用数据。</p><p></p><p>请注意，在极少数情况下，该方法的实际超时时间可能略长于 `loadTimeout` 中指定的值，因为操作可能包含多个底层请求。</p> |

不要硬编码产品 ID！由于付费墙是远程配置的，可用产品、产品数量以及特殊优惠（如免费试用）可能随时发生变化。请确保您的代码能够动态处理这些场景。  
例如，如果您最初获取了 2 个产品，您的应用应展示这 2 个产品。但是，如果您后来获取了 3 个产品，您的应用应在无需修改任何代码的情况下展示全部 3 个产品。唯一需要硬编码的是版位 ID。

响应参数：

| 参数 | 描述 |
| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Paywall | 一个 [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) 对象，包含：产品 ID 列表、付费墙标识符、远程配置以及其他若干属性。 |

## 获取产品 \{#fetch-products\}

获取付费墙后，您可以查询与其对应的产品数组：

```typescript showLineNumbers
try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}
```

响应参数：

| 参数 | 描述 |
| :-------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Products | [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct) 对象列表，包含：产品标识符、产品名称、价格、货币、订阅时长以及其他若干属性。 |

在实现自定义付费墙设计时，您可能需要访问 [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct) 对象中的这些属性。以下列出了最常用的属性，完整属性详情请参阅链接文档。

| 属性 | 描述 |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **标题** | 要显示产品标题，请使用 `product.localizedTitle`。请注意，本地化基于用户选择的商店国家/地区，而非设备本身的语言区域设置。 |
| **价格** | 要显示本地化价格，请使用 `product.price?.localizedString`。此本地化基于设备的语言区域信息。您也可以使用 `product.price?.amount` 以数字形式获取价格，该值将以本地货币提供。要获取对应的货币符号，请使用 `product.price?.currencySymbol`。 |
| **订阅周期** | 要显示周期（如周、月、年等），请使用 `product.subscription?.localizedSubscriptionPeriod`。此本地化基于设备的语言区域设置。要以编程方式获取订阅周期，请使用 `product.subscription?.subscriptionPeriod`。从中可以访问 `unit` 属性以获取时长（即 `'day'`、`'week'`、`'month'`、`'year'` 或 `'unknown'`）。`numberOfUnits` 值将获取周期单位数量。例如，对于季度订阅，`unit` 属性中将显示 `'month'`，`numberOfUnits` 属性中将显示 `3`。 |
| **新用户优惠** | 要显示标记或其他指示符来表明订阅包含新用户优惠，请查看 `product.subscription?.offer?.phases` 属性。这是一个最多可包含两个折扣阶段的列表：免费试用阶段和新用户价格阶段。每个阶段对象中包含以下实用属性：<br/>• `paymentMode`：字符串，取值为 `'free_trial'`、`'pay_as_you_go'`、`'pay_up_front'` 和 `'unknown'`。免费试用将为 `'free_trial'` 类型。<br/>• `price`：折扣价格（数字）。免费试用时，该值为 `0`。<br/>• `localizedNumberOfPeriods`：使用设备语言区域设置本地化的字符串，描述优惠时长。例如，三天试用优惠在此字段中显示为 `'3 days'`。<br/>• `subscriptionPeriod`：您也可以通过此属性获取优惠周期的详细信息，其使用方式与上一节描述的订阅周期相同。<br/>• `localizedSubscriptionPeriod`：针对用户语言区域格式化的折扣订阅周期。 |

## 使用默认目标受众付费墙加速付费墙获取 \{#speed-up-paywall-fetching-with-default-audience-paywall\}

通常情况下，付费墙几乎可以即时获取，因此您无需担心加速此过程。但是，在您拥有大量目标受众和付费墙，且用户网络连接较弱的情况下，获取付费墙可能需要比预期更长的时间。在这种情况下，您可能希望显示默认付费墙，以确保流畅的用户体验，而不是完全不显示付费墙。

为解决这个问题，您可以使用 `getPaywallForDefaultAudience` 方法，该方法获取指定版位针对**所有用户**目标受众的付费墙。但需要注意的是，推荐的方式是使用 `getPaywall` 方法获取付费墙，详情请参阅上方的[获取付费墙信息](fetch-paywalls-and-products-react-native#fetch-paywall-information)部分。

:::warning
为什么我们推荐使用 `getPaywall`

`getPaywallForDefaultAudience` 方法存在一些重要缺点：

- **潜在的向后兼容性问题**：如果您需要为不同的应用版本（当前版本和未来版本）显示不同的付费墙，可能会面临挑战。您要么必须设计支持当前（旧版）版本的付费墙，要么接受当前（旧版）版本的用户可能遇到付费墙无法渲染的问题。
- **失去精准定向**：所有用户都将看到为**所有用户**目标受众设计的同一个付费墙，这意味着您将失去个性化定向能力（包括基于国家/地区、营销归因或您自己自定义属性的定向）。

如果您愿意接受这些缺点以获得更快的付费墙获取速度，请按以下方式使用 `getPaywallForDefaultAudience` 方法。否则，请继续使用[上方](#fetch-paywall-information)描述的 `getPaywall`。
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
```

:::note
`getPaywallForDefaultAudience` 方法从 React Native SDK 2.11.2 版本开始可用。
:::

| 参数 | 是否必填 | 描述 |
|---------|--------|-----------|
| **placementId** | 必填 | [版位](placements)的标识符。这是您在 Adapty 看板中创建版位时指定的值。 |
| **locale** | <p>可选</p><p>默认值：`en`</p> | <p>[付费墙本地化](add-remote-config-locale)的标识符。此参数应为由一个或多个子标签组成的语言代码，子标签之间用连字符（**-**）分隔。第一个子标签表示语言，第二个子标签表示地区。</p><p></p><p>示例：`en` 表示英语，`pt-br` 表示巴西葡萄牙语。</p><p></p><p>有关语言区域代码及我们推荐使用方式的更多信息，请参阅[本地化和语言区域代码](react-native-localizations-and-locale-codes)。</p> |
| **fetchPolicy** | 默认值：`.reloadRevalidatingCacheData` | <p>默认情况下，SDK 将尝试从服务器加载数据，如果失败则返回缓存数据。我们推荐使用此选项，因为它能确保用户始终获取最新数据。</p><p></p><p>但是，如果您认为用户的网络连接不稳定，可以考虑使用 `.returnCacheDataElseLoad`，在缓存数据存在时直接返回缓存。在这种情况下，用户可能无法获取最新数据，但无论网络状况如何，加载速度都会更快。缓存会定期更新，因此在会话期间使用缓存以避免网络请求是安全的。</p><p></p><p>请注意，缓存在应用重启后仍然保留，只有在应用卸载重装或手动清除时才会被清空。</p> |