集成RevenueCat Paywall的React Native CLI应用频繁崩溃问题

问题现象 #

开发React Native应用时，使用react-native-purchases和react-native-purchases-ui实现内购功能，展示RevenueCatUI.Paywall组件时出现如下异常：

• 首次通过Xcode运行应用完全正常
• 使用React Native CLI启动时，90%的场景正常，但刷新应用后会崩溃
• 已尝试回退/更新RevenueCat相关库，且能正常获取产品列表和Offerings，问题仍未解决

可能的根因 #

这类崩溃通常和React Native热重载时原生模块的状态冲突、Paywall组件初始化时机不当，或者原生依赖缓存不一致有关。

解决方案 #

1. 全局初始化RevenueCat，避免组件内重复配置 #

将Purchases.configure移到应用根组件（如App.js）中执行，确保全局仅初始化一次，避免Paywall组件反复挂载/卸载时重复触发初始化，引发原生侧冲突：

修改App.js示例：

import React, { useEffect } from 'react';
import Purchases from 'react-native-purchases';
import Paywall from './Paywall';

function App() {
  useEffect(() => {
    const initRevenueCat = async () => {
      try {
        await Purchases.configure({ apiKey: 'APIKEY' });
        console.log('RevenueCat全局初始化完成');
      } catch (err) {
        console.error('RevenueCat初始化失败:', err);
      }
    };
    initRevenueCat();
  }, []);

  return <Paywall />;
}

export default App;

修改后的Paywall组件：
移除组件内的Purchases.configure逻辑，仅保留Offerings获取：

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import Purchases from 'react-native-purchases';
import RevenueCatUI from 'react-native-purchases-ui';

function Paywall() {
  const [offerings, setOfferings] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchOfferings = async () => {
      try {
        const offeringsResponse = await Purchases.getOfferings();
        setOfferings(offeringsResponse.current);
      } catch (err) {
        console.error('获取Offerings失败:', err);
        setError(err);
      }
    };
    fetchOfferings();
  }, []);

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>加载失败: {error.message}</Text>
      </View>
    );
  }

  if (!offerings?.availablePackages?.length) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>加载内购选项...</Text>
      </View>
    );
  }

  return (
    <View style={{flex: 1}}>
      <RevenueCatUI.Paywall
        options={{ offering: offerings }}
        onPurchaseCompleted={(purchase) => {
          console.log('购买完成:', purchase);
        }}
      />
    </View>
  );
}

export default Paywall;

2. 彻底清理依赖缓存，确保原生依赖版本一致 #

执行以下命令清理Node和iOS依赖缓存，避免版本不匹配导致的原生侧冲突：

# 清理Node依赖
rm -rf node_modules package-lock.json yarn.lock
npm install

# 清理iOS Pod依赖
cd ios
pod deintegrate
rm -rf Podfile.lock Pods
pod install
cd ..

3. 添加错误边界，捕获组件崩溃 #

创建错误边界组件包裹Paywall，避免单个组件崩溃导致整个应用退出，同时可以捕获具体错误信息：

import React from 'react';
import { View, Text } from 'react-native';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Paywall组件崩溃:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>内购页面加载失败，请稍后重试</Text>
          <Text style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
            错误信息: {this.state.error?.message}
          </Text>
        </View>
      );
    }

    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <Paywall />
</ErrorBoundary>

4. 开发模式下规避热重载冲突 #

在开发模式下，给Paywall组件添加热重载重置逻辑，确保每次重载时重新获取Offerings：

useEffect(() => {
  const fetchOfferings = async () => {
    // ... 原有获取逻辑
  };
  fetchOfferings();

  // 开发模式下监听热重载
  if (__DEV__) {
    const subscription = require('react-native').AppState.addEventListener('change', (nextAppState) => {
      if (nextAppState === 'active') {
        fetchOfferings();
      }
    });
    return () => subscription.remove();
  }
}, []);

内容的提问来源于stack exchange，提问作者Daniel Haidari