React Native加载本地静态内容时如何实现平滑过渡或显示加载器？

问题根源 #

你当前的代码在countries.js里提前用require加载了所有200张国旗图片，当导入这个数组时，React Native会同步加载所有图片资源，直接阻塞JS线程，导致页面导航时出现1秒左右的冻结。

解决方案 #

1. 移除提前加载的图片，改为渲染时动态加载

修改countries.js，去掉flag字段的require，只保留国家编码等基础信息：

const countries = [{
    letterCode: "ad",
    phoneCode: "376",
    name: "Andorra"
  },
  // 其他国家数据...
]

然后在renderItem函数中，根据letterCode动态加载对应图片：

const renderItem = (country) => {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
      <Image
        source={require(`../../assets/flags/${country.letterCode}.png`)}
        style={{ width: 30, height: 20, marginRight: 10 }}
        resizeMode="contain"
      />
      <Text>{country.name} (+{country.phoneCode})</Text>
    </View>
  );
};

这样只有当列表项被渲染到屏幕上时，才会加载对应的图片，避免一次性加载所有资源。

2. 优化FlatList的渲染性能

如果使用FlatList，配置以下属性减少初始渲染压力：

<FlatList
  data={countries}
  renderItem={({ item }) => renderItem(item)}
  keyExtractor={(item) => item.letterCode}
  initialNumToRender={20} // 初始只渲染20个可见项
  maxToRenderPerBatch={10} // 每次批量渲染10个
  windowSize={5} // 只渲染视窗上下各5个范围的项
/>

这些配置能让FlatList只优先渲染屏幕可见区域的内容，避免一次性渲染全部200个列表项。

3. 使用FastImage提升图片加载效率

替换原生Image组件为react-native-fast-image，它支持本地图片缓存和更高效的加载机制：

# 安装依赖
npm install react-native-fast-image
# 或 yarn add react-native-fast-image

然后修改renderItem中的图片组件：

import FastImage from 'react-native-fast-image';

const renderItem = (country) => {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
      <FastImage
        source={require(`../../assets/flags/${country.letterCode}.png`)}
        style={{ width: 30, height: 20, marginRight: 10 }}
        resizeMode={FastImage.resizeMode.contain}
      />
      <Text>{country.name} (+{country.phoneCode})</Text>
    </View>
  );
};

4. 预加载高频使用的国旗

在APP启动或进入前一个页面时，预加载用户常用的国家国旗，减少进入页面时的加载压力：

import { Image } from 'react-native';

// 预加载常用国旗
const preloadCommonFlags = () => {
  const commonCodes = ['cn', 'us', 'gb', 'jp', 'de'];
  commonCodes.forEach(code => {
    Image.prefetch(require(`../../assets/flags/${code}.png`));
  });
};

// 在App组件或前一个页面的useEffect中调用
useEffect(() => {
  preloadCommonFlags();
}, []);

内容的提问来源于stack exchange，提问作者Aleister Crowley