react-native-iap安卓版添加支付方式时弹出空白弹窗求助

iOS端使用react-native-iap组件运行正常，但安卓Beta版和正式商店版出现UI异常：用户尚未添加支付方式时，选择添加弹出的是空白弹窗，而非信用卡信息输入表单。

相关支付请求代码 #

const _requestPurchase = async () => {
    const sku = selected.production_id
    try {
      showCustomDialog(
        <ActivityIndicator color={color.palette.black} size="large" />,
        { transparentBackDrop: true },
      )
      const products = await getProducts({ skus: [sku] })
      if (products.length > 0) {
        await requestPurchase({
          sku,
        })
        hideCustomDialog()
      } else {
        hideCustomDialog()
        showIAPDialog(selected.price_diamond, false)
        setSelected(null)
        packageSelected.current = null
      }
    } catch (err) {
      hideCustomDialog()
      showIAPDialog(selected.price_diamond, false)
      setSelected(null)
      packageSelected.current = null
    }
  }

function hideCustomDialog() {
  const sibling = siblings.pop()
  sibling && sibling.destroy()
}

排查与解决方向 #

• 检查安卓端react-native-iap配置完整性，确认Google Play Billing相关权限、依赖是否正确配置，正式版需保证Billing Library版本适配当前Google Play服务，版本不兼容易导致UI加载失败。
• 调整自定义弹窗与支付请求的调用顺序：当前代码在requestPurchase之后才隐藏自定义弹窗，可能引发层级冲突，遮挡系统支付UI。建议先隐藏自定义弹窗再发起支付请求，修改后代码示例：

  const _requestPurchase = async () => {
      const sku = selected.production_id
      try {
        showCustomDialog(
          <ActivityIndicator color={color.palette.black} size="large" />,
          { transparentBackDrop: true },
        )
        const products = await getProducts({ skus: [sku] })
        if (products.length > 0) {
          // 先隐藏弹窗再发起支付
          hideCustomDialog()
          await requestPurchase({
            sku,
          })
        } else {
          hideCustomDialog()
          showIAPDialog(selected.price_diamond, false)
          setSelected(null)
          packageSelected.current = null
        }
      } catch (err) {
        hideCustomDialog()
        showIAPDialog(selected.price_diamond, false)
        setSelected(null)
        packageSelected.current = null
      }
    }
  

• 若正式版启用了ProGuard代码混淆，需添加react-native-iap和Billing相关类的混淆豁免规则到proguard-rules.pro：

  -keep class com.reactnativecommunity.iap.** { *; }
  -keep class com.android.billingclient.** { *; }
  

• 确认测试账号已加入Google Play测试组，Beta版需使用合规测试账号，避免环境限制导致支付UI无法正常渲染。

内容的提问来源于stack exchange，提问作者eric long