React Native如何从assets加载本地图片？报错求助

问题 #

开发React Native应用时，尝试从assets文件夹加载本地默认图片icon_detail.png，相关代码如下：

CategoryInfoCard组件代码 #

export const CategoryInfoCard = ({ category = {} }) => {
    const {
        name = "Zoogdieren",
        images = "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg",
        icon = "./assets/icon_detail.png",
    } = category;

    return (
        <CategoryCard
            elevation={5}
            style={{
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
            }}>
            <Title center variant="h1" style={{ left: 100 }}>
                {name}
            </Title>
            <CategoryGroupCardCover source={{ uri: images }} />
            <Spacer style={{ width: 15, height: 15 }}>
                <Icon source={require({ uri: icon })} />
            </Spacer>
        </CategoryCard>
    );
};

Icon组件定义 #

export const Icon = styled.Image`
    width: 15px;
    height: 15px;
`;

运行时出现错误：

src\features\animalGroup\components\category-info-card.component.js: src\features\animalGroup\components\category-info-card.component.js:Invalid call at line 46: require({
  uri: icon
})

请问如何正确从assets文件夹加载本地图片，解决此报错？

解决方案 #

问题核心是React Native加载本地图片的规则：require加载本地资源时，必须传入静态字符串路径，不能是动态生成的对象或变量。按以下步骤修改即可解决：

1. 修改默认值的写法
   把icon的默认值直接改为require('./assets/icon_detail.png')，替换原来的字符串路径：

const {
    name = "Zoogdieren",
    images = "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg",
    icon = require('./assets/icon_detail.png'), // 直接用require加载本地图
} = category;

2. 调整Icon组件的source属性
   直接传入解构得到的icon即可，不需要再嵌套require：

<Icon source={icon} />

3. 动态本地图片的处理（可选）
   如果需要支持动态传入不同的本地图片，不能直接传字符串路径，得提前预加载所有可能用到的图片：

// 先预加载所有本地图标
const localIconMap = {
  detail: require('./assets/icon_detail.png'),
  edit: require('./assets/icon_edit.png'),
  // 其他需要的图标
};

// 组件内根据传入的key获取对应图标
const IconComponent = ({ category = {} }) => {
  const { iconKey = 'detail' } = category;
  const icon = localIconMap[iconKey];
  
  return <Icon source={icon} />;
};

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