React Native卡牌游戏帧率疑问：仅展示本地图片为何仅30fps？

Fortnite、PUBG这类原生手游和React Native应用的底层渲染逻辑完全不同：

• 原生游戏引擎（Unreal/Unity）直接操作GPU，渲染管线是底层优化的，所有绘制逻辑都在原生线程执行，没有JS与原生的桥接开销，且针对移动GPU做了大量硬件适配。
• React Native是JS驱动的跨平台框架，UI渲染需要JS线程计算Virtual DOM，再通过桥接同步到原生线程渲染，额外的线程通信、Virtual DOM diff都会消耗性能；FlatList这类组件本身的组件复用、渲染调度逻辑也比原生列表更重。

1. 图片渲染优化 #

本地图片并非直接用就高效，必须做预处理：

• 提前压缩图片尺寸，确保图片分辨率匹配手机屏幕（比如不要用2000px宽的图片在1080p手机上显示），避免运行时缩放消耗GPU资源。
• 用FastImage替代原生Image组件，它支持本地图片缓存、渐进式加载，渲染性能比原生Image高很多：

  import FastImage from 'react-native-fast-image';
  
  <FastImage
    source={{ uri: 'file:///path/to/local/image' }}
    style={{ width: 100, height: 150 }}
    resizeMode={FastImage.resizeMode.contain}
  />
  

• 给图片设置固定的宽高，不要让组件动态计算尺寸，减少布局计算开销。

2. FlatList性能优化（替代FlashList的方案） #

不用FlashList也能把FlatList性能拉上去，重点解决选中状态丢失和渲染开销：

• 提升选中状态到父组件：不要在列表项组件内部维护选中state，把选中的卡牌ID存在父组件的state或全局状态（比如Zustand），列表项通过props接收isSelected状态，这样即使组件被回收重建，状态也不会丢失：

  // 父组件
  const [selectedCardIds, setSelectedCardIds] = useState(new Set());
  
  const handleCardSelect = (cardId) => {
    const newSet = new Set(selectedCardIds);
    if (newSet.has(cardId)) newSet.delete(cardId);
    else newSet.add(cardId);
    setSelectedCardIds(newSet);
  };
  
  // 列表项组件（用memo包裹避免不必要重渲染）
  const CardItem = memo(({ card, isSelected, onPress }) => (
    <TouchableOpacity onPress={onPress} style={{ opacity: isSelected ? 0.7 : 1 }}>
      <FastImage source={{ uri: card.imagePath }} style={styles.card} />
    </TouchableOpacity>
  ));
  
  // FlatList使用
  <FlatList
    data={cards}
    renderItem={({ item }) => (
      <CardItem
        card={item}
        isSelected={selectedCardIds.has(item.id)}
        onPress={() => handleCardSelect(item.id)}
      />
    )}
    keyExtractor={(item) => item.id}
    initialNumToRender={10} // 初始渲染10项，根据屏幕调整
    maxToRenderPerBatch={5} // 每次批量渲染5项
    windowSize={5} // 预渲染当前屏幕上下各5个窗口的内容
    removeClippedSubviews={true} // 自动销毁屏幕外的组件，节省内存
  />
  

• 用memo包裹列表项组件，只有当card、isSelected或onPress变化时才重渲染。
• 开启removeClippedSubviews，自动回收屏幕外的组件，减少内存占用。

3. 导航与页面加载优化 #

React Native Navigation的场景切换也可能导致帧率下降：

• 用useFocusEffect延迟加载卡牌数据，不要在组件挂载时一次性加载200张卡牌的所有数据，而是在页面获得焦点时再加载：

  import { useFocusEffect } from '@react-navigation/native';
  
  useFocusEffect(
    React.useCallback(() => {
      // 加载卡牌数据
      loadCards();
      return () => {
        // 页面失去焦点时清理资源
        clearCardData();
      };
    }, [])
  );
  

• 关闭不必要的页面过渡动画，或者使用更轻量的过渡效果，避免切换时的GPU负载过高。

4. Lottie动画预优化 #

如果要加Lottie，提前做这些避免帧率暴跌：

• 使用lottie-react-native的原生渲染版本，不要用web版的lottie-web，原生版本直接调用iOS/Android的Lottie库，性能更高。
• 压缩Lottie动画文件：用LottieFiles的在线工具去掉不必要的图层、关键帧，减小文件体积和渲染开销。
• 只在需要时播放动画：比如卡牌选中时触发播放，不要默认循环播放；播放完成后及时停止，释放资源。
• 开启cacheComposition缓存动画组件，避免重复解析动画文件：

  import LottieView from 'lottie-react-native';
  
  <LottieView
    source={require('../assets/selected-animation.json')}
    autoPlay={false}
    loop={false}
    cacheComposition={true}
    style={{ width: 50, height: 50 }}
  />
  

5. FlashList问题修复（如果想继续使用） #

如果一定要用FlashList解决选中状态丢失和崩溃问题：

• 同样把选中状态提升到父组件，不要在列表项内部维护state。
• 更新FlashList到最新版本，旧版本可能存在组件回收导致的崩溃bug。
• 检查列表项组件是否有内存泄漏：比如订阅了事件但没有在useEffect的清理函数中取消，或者持有了不必要的引用。

内容的提问来源于stack exchange，提问作者Mohammad Shool