---
title: "在 React Native SDK 中通过 Flow Builder 启用付费功能"
description: "通过 Adapty Flow Builder 启用应用内购买的快速入门指南。"
---

要启用应用内购买，你需要了解三个核心概念：
- [**产品**](product) – 用户可购买的一切内容（订阅、消耗型商品、永久授权）
- [**流程**](adapty-flow-builder) – 向用户展示产品的屏幕序列，在无代码的 Flow Builder 中构建，SDK 通过 `getFlow` 获取。如果你更倾向于用自己的代码构建 UI，请使用付费墙代替——详见[手动实现付费墙](react-native-quickstart-manual)。
- [**版位**](placements) – 在应用中展示流程的位置和时机（例如 `main`、`onboarding`、`settings`）。你在看板中将流程绑定到版位，然后在代码中通过版位 ID 来请求它们。这样可以轻松运行 A/B 测试，并向不同用户展示不同的流程。
Adapty 为您提供三种在应用中开启内购的方式。请根据您的应用需求选择其中一种：
| 实现方式 | 复杂度 | 使用场景 |
|---|---|---|
| Adapty Flow Builder | ✅ 简单 | 你[在无代码编辑工具中创建完整的、可购买的流程](quickstart-paywalls)。Adapty 自动渲染并处理所有复杂的购买流程、收据验证和订阅管理。 |
| 手动创建付费墙 | 🟡 中等 | 你在应用代码中实现付费墙 UI，但仍从 Adapty 获取 flow 对象，以保持产品供给的灵活性。参见[指南](react-native-quickstart-manual)。 |
| 观察者模式 | 🔴 复杂 | 你已有自己的购买处理基础设施并希望继续使用。请注意，观察者模式在 Adapty 中存在一定限制。参见[文章](observer-vs-full-mode)。 |
:::important
**以下步骤说明如何实现在 Adapty Flow Builder 中创建的流程。**

如果你更倾向于自行构建付费墙 UI，请参阅[手动实现付费墙](react-native-quickstart-manual)。
:::

要显示在 Adapty Flow Builder 中创建的流程，在你的应用代码中，只需完成以下操作：

1. **获取流程**：从 Adapty 获取流程。
2. **展示流程，Adapty 将自动处理购买**：在应用中显示该视图。
3. **处理按钮操作**：将用户交互与应用的响应关联起来。例如，当用户点击按钮时打开链接或关闭流程。
## 开始之前 \{#before-you-start\}

在开始之前，请先完成以下步骤：

1. 在 Adapty 看板中将您的应用连接到 [App Store](initial_ios) 和/或 [Google Play](initial-android)。
2. 在 Adapty 中[创建产品](create-product)。
3. [创建流程并将产品添加到其中](create-paywall)。
4. [创建版位并将流程添加到其中](create-placement)。
5. 在您的应用代码中[安装并激活 Adapty SDK](sdk-installation-reactnative)。本指南使用 Adapty React Native SDK v4 API。
## 1. 获取流程 \{#1-get-the-flow\}

你的流程与在看板中配置的版位相关联。版位允许你为不同的目标受众运行不同的流程，或进行 [A/B 测试](ab-tests)。

要获取在 Adapty 付费墙编辑工具中创建的流程，请通过 `getFlow` 方法，使用[版位](placements) ID 获取 `flow` 对象。该流程包含显示所需的 UI 元素和样式。
```typescript showLineNumbers title="React Native"

try {
  const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');
  // the requested flow
} catch (error) {
  // handle the error
}
```

## 2. 展示流程 \{#display-the-flow\}

现在，当你已经获取到流程后，只需添加几行代码即可展示它。

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

要将流程嵌入现有的组件树中，可以直接在 React Native 组件层级中使用 `AdaptyFlowView` 组件：
```typescript showLineNumbers title="React Native (TSX)"

function MyFlow({ flow }) {
  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onPurchaseCompleted={onPurchaseCompleted}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

要将流程显示为独立屏幕，请使用 `createFlowView` 方法创建一个 `view`，设置其事件处理程序，然后调用 `view.present()`。每个 `view` 只能使用一次。如果需要再次显示该流程，请再次调用 `createFlowView` 以创建新的 `view` 实例。
```typescript showLineNumbers title="React Native"

try {
  const view = await createFlowView(flow);

  view.setEventHandlers({
    onPurchaseCompleted(result, product) {
      return result.type !== 'user_cancelled';
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}
```

</TabItem>
</Tabs>

:::tip
有关如何展示流程的更多详情，请参阅我们的[指南](react-native-present-paywalls)。
:::
## 3. 处理按钮操作 \{#handle-button-actions\}

当用户点击流程中的按钮时，React Native SDK 会自动处理购买、恢复购买、关闭流程以及打开 URL 等操作。

但是，其他按钮具有自定义或预定义的 ID，需要在代码中处理相应操作。或者，你可能希望覆盖其默认行为。

例如，以下是关闭按钮的默认行为。你无需在代码中添加它，但这里展示了如何在需要时实现。

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
对于 React 组件，直接在 `AdaptyFlowView` 组件中处理操作：
```typescript showLineNumbers title="React Native (TSX)"

function MyFlow({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true, // allow the flow to close
    [],
  );
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>(
    (actionId) => false,
    [],
  );

  return (
    <AdaptyFlowView
      flow={flow}
      style={{ flex: 1 }}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="模态呈现">

对于模态呈现，使用 `setEventHandlers` 实现事件处理程序：

```typescript showLineNumbers title="React Native"
const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

</TabItem>
</Tabs>

:::tip
阅读我们关于如何处理按钮[操作](react-native-handle-paywall-actions)和[事件](react-native-handling-events-1)的指南。
:::
## 后续步骤 \{#next-steps\}

:::tip
有疑问或遇到问题？欢迎访问我们的[支持论坛](https://adapty.featurebase.app/)，在那里你可以找到常见问题的解答，也可以提出自己的问题。我们的团队和社区随时为你提供帮助！
:::

你的流程已准备好在应用中展示。[测试购买](react-native-test)，确保可以在流程中完成测试购买。

接下来，你需要[检查用户的访问等级](react-native-check-subscription-status)，以确保向正确的用户展示流程或开放付费功能。
## 完整示例 \{#full-example\}

以下是将本指南中所有步骤整合到应用中的完整示例。

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>
```javascript showLineNumbers title="React Native (TSX)"

export default function FlowScreen() {
  const [flow, setFlow] = useState(null);

  const loadFlow = async () => {
    try {
      const flowData = await adapty.getFlow('YOUR_PLACEMENT_ID');
      setFlow(flowData);
    } catch (error) {
      console.warn('Error loading flow:', error);
    }
  };

  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(
    () => true,
    [],
  );

  const onPurchaseCompleted = useCallback<FlowEventHandlers['onPurchaseCompleted']>(
    (result, product) => result.type !== 'user_cancelled',
    [],
  );

  useEffect(() => {
    loadFlow();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {flow ? (
        <AdaptyFlowView
          flow={flow}
          style={{ flex: 1 }}
          onCloseButtonPress={onCloseButtonPress}
          onPurchaseCompleted={onPurchaseCompleted}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Flow" onPress={loadFlow} />
        </View>
      )}
    </View>
  );
}
```

</TabItem>
<TabItem value="standalone" label="弹窗展示">
```javascript showLineNumbers title="React Native"

export default function FlowScreen() {
  const showFlow = async () => {
    try {
      const flow = await adapty.getFlow('YOUR_PLACEMENT_ID');

      const view = await createFlowView(flow);

      view.setEventHandlers({
        onCloseButtonPress() {
          return true;
        },
        onPurchaseCompleted(result, product) {
          return result.type !== 'user_cancelled';
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing flow:', error);
    }
  };

  // you can add a button to manually trigger the flow for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Flow" onPress={showFlow} />
    </View>
  );
}
```

</TabItem>
</Tabs>