React Native如何从JSON文件动态配置Image组件的图片路径？

问题原因 #

你遇到的问题源于React Native的资源打包机制：

• { uri: 路径 }仅适用于网络图片或设备本地文件系统路径，而assets目录下的图片在打包后会被编译为资源ID，并非原始文件路径，因此无法直接通过uri加载。
• require(动态变量)不被支持：Metro打包工具需要静态分析require的参数，必须是固定字符串，动态传入变量会导致路径无法被识别。

推荐解决方案：静态映射表（简单可靠） #

步骤1：修改JSON配置文件 #

将图片路径替换为唯一标识（避免动态路径）：

[
  {
    "name": "AppleBees",
    "imgKey": "applebees"
  },
  {
    "name": "Arbys",
    "imgKey": "arbys"
  },
  {
    "name": "Buffalo Wild Wings",
    "imgKey": "buffaloWildWings"
  }
]

步骤2：在组件中创建静态资源映射 #

将标识与require的图片资源绑定，Metro能正确识别静态路径：

import React from 'react';
import { View, Image } from 'react-native';
import imageData from './imageMapping.json';

// 静态资源映射，确保路径与你的文件层级匹配
const imageAssets = {
  applebees: require('../assets/logos/applebees-logo.jpg'),
  arbys: require('../assets/logos/arbys-logo.jpg'),
  buffaloWildWings: require('../assets/logos/buffalo-wild-wings-logo.jpg')
};

const App = () => {
  return (
    <View>
      {imageData.map((item, index) => (
        <View key={index}>
          <Image 
            source={imageAssets[item.imgKey]} 
            style={{ width: 100, height: 100 }} 
          />
        </View>
      ))}
    </View>
  );
};

export default App;

备选方案：Expo Asset预加载（适合大量图片场景） #

如果需要批量预加载图片避免加载闪烁，可使用Expo的Asset系统：

import React, { useEffect, useState } from 'react';
import { View, Image } from 'react-native';
import { Asset } from 'expo-asset';
import imageData from './imageMapping.json';

// 提前声明所有图片资源（静态路径，Metro可识别）
const rawAssets = [
  require('../assets/logos/applebees-logo.jpg'),
  require('../assets/logos/arbys-logo.jpg'),
  require('../assets/logos/buffalo-wild-wings-logo.jpg')
];

const App = () => {
  const [loadedImageUris, setLoadedImageUris] = useState({});

  useEffect(() => {
    const loadAllAssets = async () => {
      // 批量下载资源
      const loadedAssets = await Promise.all(
        rawAssets.map(asset => Asset.fromModule(asset).downloadAsync())
      );
      // 建立名称与本地路径的映射
      const uriMap = {};
      imageData.forEach((item, idx) => {
        uriMap[item.name] = loadedAssets[idx].localUri;
      });
      setLoadedImageUris(uriMap);
    };
    loadAllAssets();
  }, []);

  return (
    <View>
      {imageData.map((item, index) => (
        <View key={index}>
          {loadedImageUris[item.name] && (
            <Image 
              source={{ uri: loadedImageUris[item.name] }} 
              style={{ width: 100, height: 100 }} 
            />
          )}
        </View>
      ))}
    </View>
  );
};

export default App;

注意事项 #

• 确认图片路径的正确性：路径是相对于当前组件文件的相对路径，比如组件在src/App.js，图片在src/assets/logos，则路径应为./assets/logos/xxx.jpg（而非../assets）。
• 若使用Expo，需在app.json中配置assets目录，确保打包时包含图片：

{
  "expo": {
    "assets": ["./assets/logos/"]
  }
}

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