关于react-native:在React-Native应用中实现Android内购功能

129次阅读

共计 8603 个字符，预计需要花费 22 分钟才能阅读完成。

首发于公众号 前端混合开发，欢送关注。

编者注：本文于 2023 年 9 月 21 日更新，移除了对现已弃用的 expo-in-app-purchases 库的提及。当初建议您应用 react-native-iap 或 react-native-purchases，咱们在本文中都有探讨。

利用内购买（IAP）曾经扭转了挪动利用的盈利形式。它不仅为开发者和企业解锁了新的支出起源，还使开发者可能为用户发明更具吸引力和沉迷感的体验。

有许多基于 Google Play 计费库和苹果的 StoreKit 框架构建的 React Native IAP（利用内购买）包，能够让你轻松地将利用内购买集成到你的利用中。然而，咱们将通过一系列步骤来探讨如何将 react-native-iap 集成到你的 React Native 利用中，这波及构建一个简略的食谱应用程序；在这里找到 GitHub。

概述：利用内购买

利用内购买是用户能够间接在你的利用内购买的额定内容、性能、订阅或服务。换句话说，它是一种利用货币化模型，容许咱们收费或以较低成本提供你的应用程序，给予用户无需事后财务承诺就能应用利用的机会，并通过进行利用内购买解锁额定性能或内容的选项。

利用内购买是通过连贯到利用商店计费零碎的领取网关来实现的。计费和交易过程齐全由利用商店治理，使用户可能平安地进行交易。

IAP 提供了极大的灵活性。无论你是在开发电子商务平台、生产力利用还是媒体平台，都能够利用 IAP 来开释你利用的全副货币化后劲。一些常见的利用内购买示例包含：

  • 虚构产品：如虚构货币、扩大包、游戏晋升等虚构物品，用于加强用户体验
  • 锁定性能：利用可能有一个收费的根底版本供普通用户应用，以及一个付费的业余版本，该版本提供了只能通过利用内购买解锁的额定性能，以吸引寻求更残缺体验的用户
  • 订阅：为了定期取得对独家内容或服务的拜访权而收取的周期性费用，即费用是每月的，到了结算周期的开端，订阅费用会主动收取，以持续取得对产品或服务的拜访权。

此外，IAP 容许你依据各种条件（如购买历史）为选定的用户群体创立个性化的优惠，以最大化收益，并为你的用户提供更相干的体验。

IAP 的类型

在设置 IAP 之前，你应该了解有三大类的利用内购买：

  • 消耗品：这种类型的利用内购买是为一次性应用而设计的。因而，用户能够在物品用完后再次购买——例如，虚构货币、助推器和虚构礼物。
  • 非消耗品：这些是只须要购买一次并且永恒关联到用户账户的物品 – 例如，广告移除，处分章节和自定义设置
  • 订阅：如前所述，这种利用内购买形式容许用户定期领取反复费用，以获取高级性能或独家内容的拜访权限

对于咱们的食谱应用程序

要顺利追随本文进行，你应该具备以下条件：

  • React Native 的常识
  • 一个谷歌开发者账户
  • 在你的开发机器上设置 React Native 环境
  • 一个安卓设施

为了演示如何将利用内购买集成到 React Native 利用中，咱们将开发一个食谱利用，该利用为收费用户显示无限的食谱列表，并提供利用内购买选项，通过高级订阅解锁所有食谱。

该应用程序由三个屏幕组成：

  • 首页：显示食谱列表，并蕴含一个按钮，该按钮会疏导用户到付费墙屏幕，在那里用户能够购买高级订阅
  • 菜谱详情：这个界面展现了菜谱的具体概览，包含所需的食材和制作步骤
  • 付费墙：这显示了用户能够购买的可用内购产品

应用程序的初始我的项目在 GitHub 上可用。咱们将在其根底上开发应用程序内购买局部，这将贯通文章的其余部分。

运行以下命令来克隆启动我的项目：

git clone -b start https://github.com/emmanuelhashy/RecipeApp.git --single-branch

创立咱们的 IAP 产品

要将 IAP 集成到你的应用程序中，你首先须要在各自的商店中设置产品。这些商店作为一个核心，用于配置和治理在你的应用程序中向用户展现的产品。

在这个例子中，咱们将介绍如何在 Google Play 控制台为 Android 设施设置产品的步骤。为了在开发过程中无缝测试利用内购买，你须要将你的利用公布到内部测试轨道。

在 Google Play 控制台中，设置一个商户账户以在您的利用中承受付款。之后，在“All apps”页面的已公布利用列表中抉择您的利用。

在应用程序仪表板中，滚动到侧边栏的 创收 局部并抉择 商品 下拉按钮。能够依据您的 IAP 产品类型抉择 利用内产品 或 订阅。在这个例子中，咱们将抉择“利用内产品”。

当初，在利用内产品页面上，点击创立产品按钮以创立新产品：

提供产品所需的属性，包含产品 ID、名称、形容和价格。之后，点击“保留”，而后点击“激活”以使产品可供购买。你会想复制产品的 ID，因为咱们稍后会在利用中应用它：

你当初应该能在产品概览页面看到你的产品。你能够在此页面创立尽可能多的产品。

增加许可证测试员

许可证测试员是一个账户，容许你在受控环境中与利用内购买进行交互。在开发过程中，你能够应用许可证测试员来测试和验证你的利用内购买是否失常工作，而无需进行理论领取。

在你的 Google Play 控制台中，导航至许可证测试页面，能够通过在搜寻栏中搜寻，或者从主控制台的仪表板侧边栏抉择许可证测试：

而后，点击“创立电子邮件列表”按钮，并为列表提供一个名称和测试账户的电子邮件地址。点击“保留更改”。

接下来，在应用程序仪表板的内部测试局部，点击测试人员选项卡，并增加您的测试人员列表：

抉择你之前创立的列表，而后点击保留：

接下来，点击页面底部的“复制链接”按钮，以复制给你的测试人员的邀请 URL：

最初，在带有测试账户的设施上关上 URL 以承受邀请。

装置 react-native-iap

react-native-iap 库容许你在你的 React Native 利用中无缝实现利用内购买。它是围绕 Google Play 计费库和苹果 StoreKit 框架的封装。此外，通过这个库，你还能够集成来自亚马逊利用商店的 IAP 我的项目。

首先，在终端中运行以下命令来应用 npm 安装包：

npm install react-native-iap

装置后，须要进行一些额定的配置以实现包的设置。请返回 android/build.gradle，并在 buildscript.ext 块中增加以下属性：

androidXAnnotation = "1.1.0"
androidXBrowser = "1.0.0"
minSdkVersion = 24
kotlinVersion = "1.6.0"

而后，在依赖项块上面增加以下内容：

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

react-native-iap 容许你整合来自 Google Play 商店和 Amazon Appstore 的 IAP 产品。要启用 Play 商店的领取性能，请导航至 android/app/build.gradle，而后在 defaultConfig 块下增加以下内容：

missingDimensionStrategy "store", "play"

或者，你能够通过在 Android 块中增加以下属性来启用两个商店的领取性能：

 flavorDimensions "appstore"
 productFlavors {
   googlePlay {
     dimension "appstore"
     missingDimensionStrategy "store", "play"
   }
   amazon {
     dimension "appstore"
     missingDimensionStrategy "store", "amazon"
   }
 }

初始化连贯

react-native-iap 库的原生模块须要在应用程序生命周期的晚期进行初始化，即在进行任何与 IAP 相干的函数调用之前。这能够在应用程序的根组件中实现。

为了实现这个，将以下代码增加到你的 App 组件中：

useEffect(() => {const init = async () => {
    try {await initConnection();
      if (Platform.OS === 'android') {flushFailedPurchasesCachedAsPendingAndroid();
      }
    }
    catch (error) {console.error('Error occurred during initilization', error.message);
    }
  }
  init();
  return () => {endConnection();
  }
}, [])

在上述代码中，调用了 initConnection 函数来初始化包的原生模块。

另外，在文件中蕴含以下导入：

import React, {useEffect} from 'react';
import {Platform} from 'react-native';
import {
  initConnection,
  endConnection,
  flushFailedPurchasesCachedAsPendingAndroid,
} from 'react-native-iap';

定义产品 SKU

产品 ID 是集成利用内购买的要害组成部分。每一个都能惟一地标识一个可购买的产品。因为咱们的利用内购买产品的 ID 将在利用的不同中央应用，咱们须要在一个核心地位定义它。

在 src/utils 下创立一个名为 constants.js 的新文件，并增加以下代码：

import {Platform} from "react-native"
const productSkus = Platform.select({
    android: ['recipe_app_premium']
})
export const constants = {productSkus};

在这里，咱们定义了一个常量 productSkus，借助 Platform.select 函数，正确地辨认出与设施操作系统对应的产品 ID。咱们还提供了之前在 Google Play 控制台中创立的产品的产品 ID。

获取可用购买项

react-native-iap 提供了 getAvailablePurchases 性能，用于检查用户以后的购买状况。咱们能够应用这种办法来验证用户是否领有高级订阅，以解锁所有食谱的拜访权限。

关上 src/screens/home.jsx 并在 Home 组件中增加以下代码：

useFocusEffect(useCallback(() => {setLoading(true);
        const getPurchase = async () => {
            try {const result = await getAvailablePurchases();
                const hasPurchased = result.find((product) => product.productId === constants.productSkus[0]);
                setLoading(false);
                setPremiumUser(hasPurchased);
            }
            catch (error) {console.error('Error occurred while fetching purchases', error);
            }
        }

        getPurchase();}, [])
)

在 useFocusEffect 钩子外部，咱们定义了一个 getPurchase 函数，该函数获取用户的可用购买并设置 isPremiumUser 状态为真，如果用户购买的产品的 ID 与咱们的高级产品的 ID 匹配。

另外，不要遗记蕴含以下的导入：

import {getAvailablePurchases} from "react-native-iap";
import {constants} from "../utils/constants";

增加内购产品

目前，付费墙屏幕并未显示其前面的可用 IAP 产品。为了在这个屏幕上展现咱们的 IAP 产品，让咱们开始创立一个 ProductItem 组件来代表每一个 IAP 我的项目。

在 src/components 中创立一个名为 productItem.js 的文件。而后，增加以下代码：

import React from "react";
import {View, StyleSheet, Text, Button} from "react-native";

const ProductItem = ({title, onPress}) => {
    return (<View style={styles.container}>
            <Text style={styles.title}>{title}</Text>
            <View style={styles.button}><Button title='Buy' color='coral' onPress={onPress}/></View>
        </View>
    )
}
export default ProductItem;

该组件有两个属性 —— title，是产品的名称，和 onPress，一个启动购买的回调函数。

接下来，增加组件款式：

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        height: 100,
        borderRadius: 10,
        elevation: 6,
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10,
        marginTop: 30,
        marginHorizontal: 10
    },
    title: {
        color: '#000',
        fontSize: 16,
        flex: 2.5,
        marginRight: 10
    },
    button: {flex: 1}
});

而后，关上 src/screens/paywall.jsx 并在 Paywall 组件中增加以下内容:

const [products, setProducts] = useState([]);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
      const  purchaseUpdateSubscription = purchaseUpdatedListener(async (purchase) => {
              const receipt = purchase.transactionReceipt;
              if (receipt) {
                  try {await finishTransaction({ purchase, isConsumable: false});
                  } catch (error) {console.error("An error occurred while completing transaction", error);
                  }
                  notifySuccessfulPurchase();}
          });
      const purchaseErrorSubscription = purchaseErrorListener((error) =>
          console.error('Purchase error', error.message));
      const fetchProducts = async () => {
          try {const result = await getProducts({ skus: constants.productSkus});
              setProducts(result);
              setLoading(false);
          }
          catch (error) {Alert.alert('Error fetching products')
          }
      }
      fetchProducts();
      return () => {purchaseUpdateSubscription.remove();
          purchaseErrorSubscription.remove();}

  }, [])

咱们合成下面的代码块是做什么的：

  • 首先，咱们定义两个状态 — products 和 isLoading — 用于存储 IAP 我的项目和正在获取的 IAP 我的项目的加载状态
  • 在 useEffect 钩子中，咱们定义了两个监听器 — purchaseUpdatedListener 和 purchaseError — 来监听胜利的购买和在过程中可能产生的任何谬误。通常，你应该在启动任何购买事件之前注册这些监听器。
  • 在 purchaseUpdatedListener 中，咱们定义了一些自定义逻辑来解决与咱们后端的收据验证

在钩子中，咱们应用 fetchProduct 函数获取可用的产品，该函数围绕 react-native-iap 中的 getProducts 函数。而后，产品的状态会依据返回后果进行更新。

最初，咱们确保在组件卸载时移除监听器。

接下来，增加以下函数，该函数在购买实现时执行：

const notifySuccessfulPurchase = () => {
    Alert.alert("Success", "Purchase successful", [
        {
            text: 'Home',
            onPress: () => navigation.navigate('Home')
        }
    ])
}

而后，增加上面的代码来解决购买：

const handlePurchase = async (productId) => {setPurchaseLoading(true)
    try {await requestPurchase({ skus: [productId] });
    } catch (error) {Alert.alert('Error occurred while making purchase')
    }
    finally {setLoading(false);
    }
}

上述函数通过提供正在购买的商品的产品 ID 来调用 requestPurchase 函数，以启动一个 IAP。

更新付费墙

最初，将付费墙的 JSX 更新为以下内容：

<View style={styles.container}>
    {
        !isLoading ?
            <>
                <View style={styles.header}>
                    <Image source={backgroundImage} style={styles.image} />
                    <View style={styles.heading}>
                        <Text style={styles.text}>Unlock all Recipes</Text>
                        <Text style={styles.subText}>Get unlimited access to 1000+ recipes</Text>
                    </View>
                </View>
                {products.map((product, index) => (
                    <ProductItem
                        key={index}
                        title={product.title}
                        onPress={() => handlePurchase(product.productId)} />
                ))}
            </> :
            <View style={styles.indicator}>
                <ActivityIndicator size='large' />
            </View>
    }
</View>

在文件中蕴含以下导入：

import React, {useEffect, useState} from "react";
import {View, StyleSheet, Text, Image, Alert, ActivityIndicator} from "react-native";
import {constants} from "../utils/constants";
import {
    getProducts, //For fetching available products
    requestPurchase, //For initiating in-app purchases
    purchaseUpdatedListener, //For listening to purchase events
    purchaseErrorListener, //For listening to purchase errors
    finishTransaction  //For acknowledging a purchase
} from "react-native-iap";
import ProductItem from "../components/productItem";

运行 React Native 利用

当初你曾经实现了利用内购买的设置，是时候运行应用程序了。为了做到这一点，确保你的安卓设施已连贯到你的开发机器。尽管你能够应用模拟器来实现这一点，但咱们倡议你在实在设施上测试利用内购买。

当初，在你的终端运行以下命令：

npx run react-native run-android

你应该能看到与上面相似的输入，并可能发动利用内购买：

总结

在你的 React Native 应用程序中实现利用内购买能够解锁额定的支出起源，而且，如果实现切当，还能够晋升你的用户体验。

咱们曾经通过逐渐领导，介绍了如何应用 react-native-iap 库轻松地将利用内购买集成到您的 React Native 利用中。如果您想思考另一种办法，或者想在 iOS 利用中实现 IAP，请查看咱们对于应用 expo-in-app-purchases 实现 IAP 的帖子。

交换

首发于公众号 大迁世界，欢送关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
react-native
发表至： react-native
2024-03-05
 0
关于react-native:ReactNative运行报错问题汇总-以及Taro小程序异常
使用-Bob-创建-React-Native-模块并且发布至-NPM
关于react-native:reactnative中webview的通信桥梁irdRnBridge
关于react-native:React-Native-的宝支付组件-uiwreactnativealipay-使用