ReactNative内购报错解决指南

在使用 React Native 开发应用内购功能时，你是否遇到了 `TypeError: right operand of 'in' is not an object` 错误？本文针对使用 `react-native-iap` 库时，因 API 参数变化导致的问题，提供了详细的解决方案。新版 `RNIAP` 库要求购买请求中的商品 ID 必须作为包含 `sku` (iOS) 或 `skus` (Android) 键的对象传入，而非简单的字符串。本文将指导你如何根据平台动态构建正确的参数对象，避免类型错误，并提供代码示例，助你顺利完成 React Native 应用内购功能的集成。了解更多关于 React Native 应用内购报错及商品 ID 参数处理的实用技巧，请继续阅读。

引言：React Native 应用内购 TypeError 错误解析

在React Native应用中集成应用内购买（In-App Purchase, IAP）功能时，react-native-iap是一个广泛使用的库。开发者通常会首先通过该库获取商品详情，然后尝试发起购买请求。然而，在某些情况下，尤其是在库版本更新后，尝试调用Iap.requestSubscription或Iap.requestPurchase等方法时，可能会遇到一个TypeError: right operand of 'in' is not an object的错误。

这个错误通常发生在已经成功获取到商品（如订阅）的详细信息，并且这些信息看起来是正确的对象（例如，包含productId等字段），但在将productId作为字符串直接传递给购买方法时，库内部期望一个对象类型，从而导致类型不匹配错误。

问题根源：API 参数变化

react-native-iap库在不断迭代和更新，其API签名也可能随之变化。导致上述TypeError的根本原因在于，新版本的requestPurchase或requestSubscription方法不再直接接受一个字符串形式的productId作为参数，而是期望一个结构化的对象。这个对象需要明确指定商品ID的键名，并且这个键名在iOS和Android平台之间有所不同。

具体来说：

• iOS平台：购买方法期望一个包含sku键的对象，例如{ sku: 'your_product_id' }。
• Android平台：购买方法期望一个包含skus键的数组对象，例如{ skus: ['your_product_id'] }。

如果直接传入一个字符串，或者传入的对象结构不正确，库内部在尝试访问预期的属性时就会失败，从而抛出TypeError。

解决方案：平台适配的参数传递

解决此问题的关键在于，在调用购买方法之前，根据当前运行的平台动态构建正确的参数对象。我们可以利用Platform.OS来判断当前是iOS还是Android，然后创建相应的参数结构。

以下是一个通用的函数示例，用于根据平台生成正确的购买参数对象：

import { Platform } from 'react-native';
import * as RNIap from 'react-native-iap'; // 假设你导入的库名为 RNIap

/**
 * 根据平台构建购买请求所需的参数对象
 * @param {string} productId 要购买的商品ID
 * @returns {object} 购买请求参数对象
 */
const getPurchaseParams = (productId) => {
  if (Platform.OS === 'ios') {
    return { sku: productId };
  } else { // Android
    return { skus: [productId] };
  }
};

// 或者更简洁地直接在调用处判断
// let purchaseParams = Platform.OS === "ios" ? { sku: prod_id } : { skus: [prod_id] };

代码示例与应用

结合原始问题中的代码片段，我们可以这样修改requestGoogleSubscription函数，以正确地发起购买请求：

import React, { useState, useEffect } from 'react';
import { Platform } from 'react-native';
import * as Iap from 'react-native-iap'; // 假设你导入的库名为 Iap

// 假设 selectedPlan 和 Sentry 已经定义
// const selectedPlan = { google_pay_id: 'weekly_subscription_3' };
// const Sentry = { captureMessage: (msg, err) => console.log(msg, err) };

function SubscriptionComponent({ selectedPlan }) {
  const [googleSub, setGoogleSub] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        // 确保 selectedPlan.google_pay_id 存在且有效
        if (!selectedPlan || !selectedPlan.google_pay_id) {
          console.warn('selectedPlan or google_pay_id is missing.');
          return;
        }
        const subs = await Iap.getSubscriptions([selectedPlan.google_pay_id]);
        if (subs && subs.length > 0) {
          console.log('Subscriptions response: ', subs);
          setGoogleSub(subs[0]);
        }
      } catch (error) {
        Sentry.captureMessage('Failed to get Google subscriptions', error);
        console.error(error);
      }
    })();
  }, [selectedPlan]);

  const requestGoogleSubscription = async () => {
    try {
      setIsLoading(true);
      console.log('requestGoogleSubscription: googleSub', googleSub);

      if (googleSub && typeof googleSub === 'object' && googleSub.productId) {
        console.log('requestGoogleSubscription: initiating purchase');

        // *** 核心修改部分 ***
        // 根据平台构建正确的参数对象
        let purchaseParams;
        if (Platform.OS === 'ios') {
          purchaseParams = { sku: googleSub.productId };
        } else { // Android
          purchaseParams = { skus: [googleSub.productId] };
        }

        // 使用构建好的参数对象调用 requestPurchase 或 requestSubscription
        // 注意：根据你的 RNIAP 版本和具体需求，可能是 requestPurchase 或 requestSubscription
        // 这里使用 requestPurchase 作为通用示例，与答案保持一致
        const purchase = await Iap.requestPurchase(purchaseParams);
        console.log('Purchase successful: ', purchase);
        // 进一步处理购买成功后的逻辑，如验证收据等
      } else {
        console.warn('No valid Google subscription details available to initiate purchase');
      }
    } catch (error) {
      Sentry.captureMessage('Failed Google subscription', error);
      console.error('Purchase Error:', error); // 更具体的错误日志
    } finally {
      setIsLoading(false);
    }
  };

  // 假设这里有一个按钮来触发 requestGoogleSubscription
  return (
    

      {/* ... 其他UI元素 ... */}
      
        {isLoading ? '购买中...' : '购买订阅'}
      
    
  );
}

export default SubscriptionComponent;

注意事项

1. RNIAP版本兼容性：此解决方案主要针对react-native-iap库更新后的API变化。如果你使用的是较旧的版本，可能不需要这样的参数结构。因此，在遇到问题时，请务必查阅你当前使用的react-native-iap版本的官方文档，以了解其最新的API签名。
2. 错误处理：在实际应用中，购买流程涉及网络请求和与应用商店的交互，可能会出现各种错误。务必实现健壮的try-catch块来捕获并处理这些错误，向用户提供友好的反馈，并进行日志记录。
3. 商品ID的准确性：确保googleSub.productId（或任何你传入的商品ID）是准确且在应用商店中配置正确的。错误的商品ID会导致购买失败。
4. 订阅与一次性购买：react-native-iap提供了requestSubscription和requestPurchase等方法。虽然本教程的解决方案主要集中在参数传递的结构上，但具体使用哪个方法取决于你的商品类型（订阅或一次性购买）。通常，requestPurchase可以处理所有类型的购买，而requestSubscription是专门针对订阅的。新版API的参数结构通常在这两个方法中是相似的。

总结

TypeError: right operand of 'in' is not an object错误在使用react-native-iap发起应用内购买时，通常是由于库API签名更新，要求商品ID以特定对象结构（{ sku: '...' }或{ skus: ['...'] }）传入而非简单字符串引起的。通过在调用购买方法前根据平台动态构建正确的参数对象，可以有效解决此问题。开发者应始终关注所用库的最新文档，以确保代码与API保持同步，从而避免类似的类型错误。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ReactNative内购报错解决指南》文章吧，也可关注golang学习网公众号了解相关技术文章。