最佳的 React Native 应用内订阅库

实现应用内订阅购买(IASP)是从移动应用程序赚钱的关键方式之一。通过 IAP,你可以轻松地将应用程序的功能和内容货币化,甚至可以出售数字产品。

React Native提供了基于 Apple 的StoreKit框架和 Google Play计费库的不同库，这有助于简化移动应用中的IAP集成。在这篇文章中，我们将探索一些最好的IAP库，用于在你的React Native应用中实现应用内订阅。

选择正确的React Native应用内购买订阅库

在决定在你的应用程序中使用哪个IAP库时，你需要考虑几个因素，包括以下内容：

文档和支持：你通常应选择拥有最新且全面文档的库，以确保顺利的集成过程。另外，检查是否有一个活跃的支持渠道或社区，以便在出现任何问题或疑问时协助你。
提供的功能：评估一个库提供的功能，并确定它们是否符合你的需求。例如，你可能需要一个能够处理收据验证、动态产品列表、退款等的库。
安全与合规性：考虑库的开发者已经采取的安全措施，以确保用户数据的充分保护，安全的支付处理，以及遵守相关的商店指南
灵活性：评估该库在本地化、UI定制、定价模型以及与第三方工具集成方面是否灵活
恢复和同步：考虑该库是否支持跨设备和平台恢复购买。此功能允许用户在更换设备或重新安装应用程序时，重新获得对先前购买的内容或服务的访问。

react-native-iap

GitHub stars: 2.4k
Weekly downloads: 25k+
GitHub repository
Documentation

react-native-iap 是由dooboolab开发和维护的一款流行的IAP库。它支持App Store、Play Store和Amazon Appstore的应用内订阅实现。

react-native-iap 提供了一组 Hooks,并暴露了一组用于处理产品购买和订阅、监听已完成和失败的交易以及获取产品列表的 API。

然而,react-native-iap 不支持收据验证,因此你必须在后端验证交易。

在集成 react-native-iap 库之前，你需要在各自的商店中配置并创建具有唯一标识符的产品目录；react-native-iap 使用这些 ID 来获取你的产品列表。

可以通过 npm 安装 react-native-iap:

npm install react-native-iap

随后，按照文档中对 Android 和 iOS 的安装指南进行操作，以完成配置过程。

Example usage: 示例用法：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Platform, Pressable } from 'react-native';
import {
  initConnection,
  endConnection,
  finishTransaction,
  flushFailedPurchasesCachedAsPendingAndroid,
  purchaseUpdatedListener,
  purchaseErrorListener,
  getProducts,
  requestPurchase,
} from 'react-native-iap'
const App = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const initializeConnection = async () => {
      try {
        await initConnection();
        if (Platform.OS === "android") {
          await flushFailedPurchasesCachedAsPendingAndroid();
        }
      } catch (error) {
        console.error("An error occurred", error.message);
      }
    }
    const purchaseUpdate = purchaseUpdatedListener(
      async (purchase) => {
        const receipt = purchase.transactionReceipt;

        if (receipt) {
          try {
            await finishTransaction({ purchase, isConsumable: true });
          } catch (error) {
            console.error("An error occurred", error.message);
          }
        }
      });

    const purchaseError = purchaseErrorListener((error) =>
      console.error('Purchase error', error.message));
    initializeConnection();
    purchaseUpdate();
    purchaseError();
    fetchProducts();
    return () => {
      endConnection();
      purchaseUpdate.remove();
      purchaseError.remove();
    }
  }, []);

  const fetchProducts = async () => {
    try {
      const products = await getProducts({
        skus: Platform.select({
          ios: ['com.rniap.product10', 'com.rniap.product20'],
          android: ['com.rniap.product100', 'com.rniap.product200'],
        })
      });
      setProducts(products);
    } catch (error) {
      console.error("Error occurred while fetching products", error.message);
    }
  };
  const makePurchase = async (sku) => {
    try {
      requestPurchase({ sku })
    } catch (error) {
      console.error("Error making purchase", error.message);
    }
  }

  return (
    <View style={styles.container}>
      {
        products.map((product) => (
          <View key={product.productId} style={styles.row}>
            <Text>{product.title}</Text>
            <Pressable onPress={() => makePurchase(product.productId)}>Buy Product</Pressable></View>
        ))
      }
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginEnd: 20
  }
});
export default App;

这段代码片段建立了应用内购买所需的连接和监听器，从商店获取产品，并允许用户通过按下屏幕上显示的每个产品的按钮进行购买。

initializeConnection 函数使用 initConnection 函数初始化应用内购买连接。如果平台是 Android，它还会使用 flushFailedPurchasesCachedAsPendingAndroid 刷新任何作为待处理缓存的失败购买。

purchaseUpdate 函数是一个监听器，当购买更新时会触发。它在成功购买后调用 finishTransaction 函数来完成交易。 purchaseError 函数是一个监听器，当购买错误发生时会触发。

react-native-adapty

GitHub stars: 88
Weekly downloads: 900+
GitHub repository

react-native-adapty 库允许你无缝地将应用内订阅集成到你的 React Native 应用程序中。它提供了一整套你通常需要管理订阅的功能，如 A/B 测试，免费试用，退款，续订，升级，降级，一次性购买和终身订阅。react-native-adapty 可以在 Expo 管理和原生 React Native 工作流中使用。

此外,它提供了一个直观的仪表板,你可以在其中跟踪性能指标、查看用户的支付历史、自定义UI元素,以及管理产品列表,而无需发布应用程序的新版本。

要开始使用 react-native-adapty，你需要创建一个 Adapty 账户，然后注册你的应用程序，之后你将获得用于你的应用程序的公共 SDK 密钥。

你可以使用 Yarn 安装 react-native-adapty SDK：

yarn add react-native-adapty

安装后，按照文档中的说明完成 Android 和 iOS 的安装。

示例用法：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
import { adapty } from 'react-native-adapty';
const App = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const initialize = async () => {
      try {
        await adapty.activate("PUBLIC_SDK_KEY", {
          customerUserId: "USER_ID",
          logLevel: 'ERROR',
        });
      } catch (error) {
        console.error("An error occurred while activating adapty", error.message);
      }
    }


    initialize();
    fetchPaywall("paywall_id");
  }, []);

  //pawywallId is the id specified when creating a paywall in the adapty dashboard
  const fetchPaywall = async (paywallId) => {
    try {
      const paywallResult = await adapty.getPaywall(paywallId);
      const productResult = await adapty.getPaywallProducts(paywallResult);
      setProducts(productResult);
    } catch (error) {
      console.error("Error occured while fetching paywall", error.message);
    }
  };
  const makePurchase = async (product) => {
    try {
      await adapty.makePurchase(product)
    } catch (error) {
      console.error("Error making purchase", error.message);
    }
  }

  return (
    <View style={styles.container}>
      {
        products.map((product) => (
          <View key={product.vendorProductId} style={styles.row}>
            <Text>{product.localizedTitle}</Text>
            <Pressable onPress={() => makePurchase(product)}>Buy Product</Pressable></View>
        ))
      }
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginEnd: 20
  }
});
export default App;

使用 adapty.makePurchase 方法可以启用应用内购买。 fetchPaywall 功能是一个异步函数，它使用 adapty.getPaywall 方法获取付费墙，然后使用 adapty.getPaywallProducts 方法获取付费墙产品。

initialize 函数是一个异步函数，它使用 adapty.activate 方法激活 Adapty SDK。它以公共 SDK 密钥，客户用户 ID 和日志级别作为参数。

要使用这段代码，你需要安装必要的依赖项，包括 Adapty SDK。此外，你需要进行替换：

用你实际的 Adapty SDK 公钥替换 "PUBLIC_SDK_KEY"
与客户用户 ID 一起
带有你想获取的付费墙 ID 的 "paywall_id"

react-native-purchases

GitHub stars: 533
Weekly downloads: 15k+
GitHub repository
Documentation

react-native-purchases 是由 RevenueCat 开发和维护的一款用户友好的 IAP 库。它是 StoreKit 框架、Google Play Billing 库和 RevenueCat 后端的封装器。然而，如果你正在使用 Expo 管理的工作流，你也需要创建一个开发构建。

它内置了对收据验证、订阅状态跟踪、分析指标和网络钩子的支持，您可以使用这些功能来设置特定购买事件的通知。此外，您还可以从仪表板远程配置产品列表，查看用户的交易历史，并轻松与第三方分析工具集成。

要开始在你的应用程序中集成 react-native-purchases,你首先需要注册一个 RevenueCat 账户,同时还需要设置一个新项目,然后继续添加你的应用程序,之后你将获得一个可在项目中使用的 API 密钥。

可以通过 npm 安装 react-native-purchases SDK：

npm install react-native-purchases

安装后，还需要为 iOS 执行一些额外的配置。另外，记得在 AndroidManifest.xml 文件中也包含“计费”权限。

<uses-permission android:name="com.android.vending.BILLING" />

示例用法：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
import Purchases from 'react-native-purchases';
const App = () => {
  const [packages, setPackages] = useState([]);

  useEffect(() => {
    Purchases.setLogLevel(Purchases.LOG_LEVEL.ERROR);
    const initialize = () => {
      Purchases.configure({
        apiKey: "API_KEY",
        appUserID: null,
        observerMode: false,
        useAmazon: false
      });
    }
    initialize();
    fetchPackages();
  }, []);

  const fetchPackages = async () => {
    try {
      const offerings = await Purchases.getOfferings()
      if(offerings.current !== null) {
        setPackages(offerings.current.availablePackages)
      }
    } catch (error) {
      console.error("Error occured while fetching packages", error.message);
    }
  };
  const makePurchase = async (pkg) => {
    try {
      const {customerInfo} = await Purchases.purchasePackage(pkg);
      if(typeof customerInfo.entitlements.active["ENTITLEMENT_ID"] !== 'undefined') {
        //do something
      }
    } catch (error) {
      if(!error.userCancelled) {    
      console.error("Error making purchase", error.message);
      }
    }
  }

  return (
    <View style={styles.container}>
      {
        packages.map((pkg) => (
          <View key={pkg.identifier} style={styles.row}>
            <Text>{pkg.title}</Text>
            <Pressable onPress={() => makePurchase(pkg)}>Buy Product</Pressable></View>
        ))
      }
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginEnd: 20
  }
});
export default App;

这段代码为一个集成了应用内购买功能的 React Native 应用进行设置。它初始化购买，获取可用的套餐，并提供一个用户界面来显示和购买这些套餐。

对 Purchases.purchasePackage 的调用启动了购买过程。 Purchases.getOfferings 获取产品。 initialize 函数使用 Purchases.configure 配置购买，包括 API 密钥， appUserID ， observerMode 和 useAmazon 属性。如果在配置过程中出现错误，它将被记录到控制台。

react-native-qonversion

GitHub stars: 118
Weekly downloads: 600+
GitHub repository
Documentation

react-native-qonversion 是另一个值得注意的 IAP 库,它允许你快速地在应用程序中集成应用内订阅,无需设置后端进行收据验证 —— 这一切都由 Qonversion 处理。

你也可以根据购买事件向用户发送个性化的推送通知，通过 A/B 测试发现最优的定价选项，查看详细的订阅分析，将订阅数据与您最喜欢的分析工具共享，处理 App Store 和 Play Store 的购买等等。

要开始集成 react-native-qonversion，你需要创建一个账户并继续创建一个项目并注册你的应用程序。之后，你可以获取你的项目密钥用于你的应用程序。另外，别忘了在 App Store Connect 和 Google Play 控制台上创建你的 IAP 产品！

可以通过 npm 安装 react-native-qonversion 库：

npm install react-native-qonversion

然而，如果你正在使用 Expo 进行开发，你也需要创建一个开发构建。

示例用法：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
import Qonversion, {QonversionConfigBuilder, LaunchMode, Entitlement} from 'react-native-qonversion'
const config = new QonversionConfigBuilder(
  'PROJECT_KEY',
  LaunchMode.SUBSCRIPTION_MANAGEMENT
).build();
const App = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const initialize = () => {
      Qonversion.initialize(config);
    }
    initialize();
    fetchProducts();
  }, []);

  const fetchProducts = async () => {
    try {
      const offerings = await Qonversion.getSharedInstance().offerings();
      if(offerings.main != null && offerings.main.products.length > 0) {
        setProducts(offerings.main.products);
      }
    } catch (error) {
      console.error("Error occured while fetching products", error.message);
    }
  };
  const makePurchase = async (product) => {
    try {
      const entitlements = await Qonversion.getSharedInstance().purchaseProduct(product);
      if(entitlements !== null && entitlements['premium'].isActive) {
        //do something
      }
    } catch (error) {
      if(!error.userCanceled) {    
      console.error("Error making purchase", error.message);
      }
    }
  }

  return (
    <View style={styles.container}>
      {
        products.map((product) => (
          <View key={product.qonversionID} style={styles.row}>
            <Text>{product.qonversionID}</Text>
            <Pressable onPress={() => makePurchase(product)}>Buy Product</Pressable></View>
        ))
      }
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginEnd: 20
  }
});
export default App;

这段代码为带有 Qonversion 集成的 React Native 应用程序设置了订阅管理。它初始化了 Qonversion SDK，获取了可用的产品，并提供了一个用户界面来显示和购买这些产品。

QonversionConfigBuilder 对象是使用 'PROJECT_KEY' 和 'LaunchMode.SUBSCRIPTION_MANAGEMENT' 值创建的。这将 Qonversion SDK 配置为适当的项目密钥，并将启动模式设置为订阅管理。

对 Qonversion.getSharedInstance().purchaseProduct(product) 的调用启动了购买过程。 Qonversion.getSharedInstance().offerings() 获取产品供应。

总结

通过利用这些库提供的功能，你可以简化在你的 React Native 应用程序中集成应用内购买的过程，从而有效地实现应用程序的盈利，并提升整体用户体验。

交流

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

最佳的 React Native 应用内订阅库

选择正确的React Native应用内购买订阅库

react-native-iap

react-native-adapty

react-native-purchases

react-native-qonversion

总结

交流

王大冶

引用和评论

停止在 React 组件回调中使用箭头函数！

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高