React中通过Props动态加载src/assets图片报错问题求助

问题原因 #

React Native的Metro打包器需要在编译时静态分析所有资源依赖，动态传入字符串路径给require()的方式无法被打包器识别，因此会出现模块找不到的错误。直接写死路径能正常工作，是因为打包器可以提前定位到该资源并打包。另外需注意：React Native中要使用官方的Image组件，而非Web端的<img>标签。

解决方案 #

方案1：父组件传递已预加载的图片对象 #

在父组件中先通过require()加载图片，再将加载结果通过props传给子组件：

父组件代码

import React from 'react';
import Row from './Row';
// 提前加载目标图片
import iconDelivery from '../assets/icondelivery.PNG';

const Parent = () => {
  return <Row imageSource={iconDelivery} pathText="../assets/icondelivery.PNG" />;
};

Row组件修改后代码

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

const Row = (props) => (
  <View style={{ flex: 1, flexDirection: 'row' }}>
    {/* 使用React Native的Image组件，传入预加载的图片对象 */}
    <Image source={props.imageSource} style={{ width: 50, height: 50 }} />
    <Text>{props.pathText}</Text>
  </View>
);

export default Row;

方案2：子组件维护图片映射表 #

在Row组件中预定义所有需要用到的图片映射，通过props传递标识来获取对应的图片：

Row组件修改后代码

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

// 预定义所有需要的图片映射
const ImageMap = {
  delivery: require('../assets/icondelivery.PNG'),
  // 可添加更多图片：other: require('../assets/other.png')
};

const Row = (props) => (
  <View style={{ flex: 1, flexDirection: 'row' }}>
    <Image source={ImageMap[props.imageKey]} style={{ width: 50, height: 50 }} />
    <Text>{props.pathText}</Text>
  </View>
);

export default Row;

父组件调用方式

<Row imageKey="delivery" pathText="../assets/icondelivery.PNG" />

方案3：适配随机展示图片场景 #

如果需要随机展示图片，可以将所有图片的require()结果存入数组，随机选取后传给子组件：

父组件示例

import React, { useState } from 'react';
import Row from './Row';
import iconDelivery from '../assets/icondelivery.PNG';
import iconPayment from '../assets/iconpayment.PNG';
import iconCart from '../assets/iconcart.PNG';

// 整理所有需要随机展示的图片
const images = [iconDelivery, iconPayment, iconCart];

const Parent = () => {
  // 随机选中一张图片
  const [randomImage] = useState(images[Math.floor(Math.random() * images.length)]);
  
  return <Row imageSource={randomImage} />;
};

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