Expo React Native项目中CardForm组件在Android设备上崩溃求助

问题场景 #

使用Expo开发React Native项目，集成@stripe/stripe-react-native的CardForm组件收集银行卡信息，该组件在Expo Go及iOS设备上运行正常，但打包成Android APK后会导致应用崩溃、显示白屏，需重启才能恢复。已尝试在app.json中添加插件、重建Android目录等操作，问题未解决。

相关代码片段：

import { CardForm, useStripe } from "@stripe/stripe-react-native";

<CardForm style={styles.cardForm} autofocus />

解决方案 #

1. 核对Stripe插件配置完整性 #

确保app.json中Stripe插件的配置项完整且正确，尤其是Android端的必填参数：

"plugins": [
  [
    "@stripe/stripe-react-native",
    {
      "merchantIdentifier": "merchant.com.你的应用包名",
      "enableGooglePay": false // 不需要Google Pay可设为false，但必须明确配置
    }
  ]
]

注意merchantIdentifier需与你的Android应用包名完全对应，缺失或错误配置会导致原生层初始化失败。

2. 确认版本兼容性 #

检查Expo SDK版本与@stripe/stripe-react-native版本是否匹配：

• Expo SDK 49 → 对应@stripe/stripe-react-native@0.29.x及以上
• Expo SDK 50 → 对应@stripe/stripe-react-native@0.33.x及以上
• Expo SDK 51+ → 对应@stripe/stripe-react-native@0.37.x及以上

可通过命令查看当前包版本：

npm list @stripe/stripe-react-native

版本不兼容是Android端崩溃的常见原因，建议升级或降级至匹配版本。

3. 改用EAS Build构建APK #

Expo传统build:android工具可能存在配置缓存或原生依赖处理不彻底的问题，改用EAS Build构建生产包：

1. 安装EAS CLI：

npm install -g eas-cli

2. 初始化EAS配置：

eas build:configure

3. 构建Android预览包：

eas build -p android --profile preview

EAS会严格处理原生依赖配置，大概率能解决Expo Build遗留的问题。

4. 添加ProGuard混淆规则（若启用混淆） #

如果项目开启了ProGuard代码混淆，需在android/app/proguard-rules.pro中添加Stripe相关规则，避免组件被优化导致崩溃：

-keep class com.stripe.android.** { *; }
-keep class com.stripe.network.** { *; }

确保android/app/build.gradle中minifyEnabled为true时，该规则被正确引用。

5. 替换CardForm为CardField组件 #

若上述方法均无效，可暂时用CardField组件替代CardForm，分步收集银行卡信息，兼容性更稳定：

import { CardField, useStripe } from "@stripe/stripe-react-native";
import { useRef } from "react";
import { Button } from "react-native";

const PaymentScreen = () => {
  const { createPaymentMethod } = useStripe();
  const cardFieldRef = useRef(null);

  const handleAddPaymentMethod = async () => {
    if (!cardFieldRef.current) return;
    
    const { error, paymentMethod } = await createPaymentMethod({
      type: 'Card',
      card: cardFieldRef.current,
    });
    
    if (!error) {
      // 处理支付方式逻辑
      console.log('支付方式创建成功:', paymentMethod);
    } else {
      console.error('创建失败:', error);
    }
  };

  return (
    <>
      <CardField
        ref={cardFieldRef}
        postalCodeEnabled={true}
        placeholder={{ number: '4242 4242 4242 4242' }}
        cardStyle={{ backgroundColor: '#FFFFFF', textColor: '#000000' }}
        style={{ width: '100%', height: 50, marginVertical: 10 }}
      />
      <Button title="添加支付方式" onPress={handleAddPaymentMethod} />
    </>
  );
};

export default PaymentScreen;

内容的提问来源于stack exchange，提问作者Husnain Mahmood