React Native本地资源图片动态渲染及无限循环问题求助

问题场景 #

项目结构：

/assets/doctor-images
/screen/DashboardScreen.tsx

通过FlatList渲染DATA数组，需要根据列表项的id匹配同名.png图片，但当前实现存在以下问题：

• 直接使用RNFS.readFile读取图片转base64后无法显示
• 使用useState存储base64 URI时触发无限循环

方案一：直接用React Native原生require加载（最推荐） #

React Native加载本地assets无需转base64，只需注意require的静态路径要求。

实现步骤 #

1. 提前创建图片映射对象（因为require不支持完全动态路径）：

const DOCTOR_IMAGES = {
  "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba": require("../assets/doctor-images/bd7acbea-c1b1-46c2-aed5-3ad53abb28ba.png"),
  "3ac68afc-c605-48d3-a4f8-fbd91aa97f63": require("../assets/doctor-images/3ac68afc-c605-48d3-a4f8-fbd91aa97f63.png"),
  "58694a0f-3da1-471f-bd96-145571e29d72": require("../assets/doctor-images/58694a0f-3da1-471f-bd96-145571e29d72.png"),
  // 补充剩余id对应的图片引用
};

2. 修改Item组件：

const Item = ({title, speciality, distance, id}: ItemProps) => {
  // 匹配对应图片，无匹配时使用默认图
  const imageSource = DOCTOR_IMAGES[id] || require("../assets/doctor-images/default.png");

  return (
    <View style={styles.item}>
      <Image source={imageSource} style={{width: 50, height: 50}} />
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.title}>{speciality}</Text>
      <Text style={styles.title}>{distance}</Text>
    </View>
  );
};

方案二：base64方式加载（解决RNFS路径与无限循环问题） #

若必须使用base64，需解决两个核心问题：RNFS的正确文件路径、避免重复读取触发无限循环。

实现步骤 #

1. 编写路径获取函数（兼容Android/iOS）：

const getImagePath = (id: string) => {
  try {
    // 通过require.resolve获取打包后的图片路径
    return require.resolve(`../assets/doctor-images/${id}.png`);
  } catch (e) {
    console.log("图片不存在：", id);
    return require.resolve("../assets/doctor-images/default.png");
  }
};

2. 使用useEffect控制读取时机：

import { useState, useEffect } from 'react';
import RNFS from 'react-native-fs';

const Item = ({title, speciality, distance, id}: ItemProps) => {
  const [imageUri, setImageUri] = useState<string>("");

  // 仅当id变化时执行图片读取，避免无限循环
  useEffect(() => {
    const loadImage = async () => {
      try {
        const path = getImagePath(id);
        const base64Data = await RNFS.readFile(path, "base64");
        setImageUri(`data:image/png;base64,${base64Data}`);
      } catch (error) {
        console.error("图片加载失败：", error);
        // 可替换为默认图的base64内容
        setImageUri("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==");
      }
    };

    loadImage();
  }, [id]);

  return (
    <View style={styles.item}>
      <Image source={{uri: imageUri}} style={{width: 50, height: 50}} />
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.title}>{speciality}</Text>
      <Text style={styles.title}>{distance}</Text>
    </View>
  );
};

常见排查点 #

• 确保图片文件名与列表项id完全一致（iOS区分大小写，Android不区分）
• 检查metro.config.js是否正确配置assets路径（默认识别根目录assets，自定义路径需额外配置）
• 使用RNFS时，确认已完成依赖安装与自动链接（React Native 0.60+自动链接，Android可能需配置文件读取权限）

内容的提问来源于stack exchange，提问作者Long Mạc Hải