Question

我正在尝试从Assets / Icons文件夹中获取多个图标，在该文件夹中我已将多个图标作为svg放置，我想通过传递名称来加载svg。

我可以通过

来获取图标

import CustomIcon from '../assets/Icons/icon-account.svg';

<View>
    <CustomIcon/>
</View>

但是我不能为我需要的每个图标继续编写多个导入。

是否可以通过将名称作为道具传递给

来获取所需的图标

示例

import CustomIcon from '../assets/Icons';

<View>
    <CustomIcon name='icon-account.svg'/>
</View>

反正在那里，这样我就能使上面的代码正常工作吗？

Answer 1

为什么不将它们全部导入到中央文件中

import AccountIcon from '../assets/Icons/icon-account.svg';
import GearIcon from '../assets/Icons/icon-gear.svg';

export default { 
    AccountIcon,
    GearIcon
}

然后将该中央文件导入其他地方？

Answer 2

如果您希望通过将 prop 传递给组件来有条件地呈现 .svg 文件，您可以这样做：

假设您有几个标志，并且想要根据国家/地区名称渲染 svg 图像。

将所有标志导入到一个名为 flags.js 的文件中，创建一个标志对象，以便您可以将键传递给您的标志组件；以及稍后要导入的 Flag 组件：

import React from 'react';
import Austria from '../../assets/NationalTeams/austria.svg';
import Belgium from '../../assets/NationalTeams/belgium.svg';
import Croatia from '../../assets/NationalTeams/croatia.svg';
...

const flags = {
  Austria: Austria,
  Belgium: Belgium,
  Croatia: Croatia,
  ...
}

// See: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime

export default function Flag(props) {
  const CountryFlag = flags[props.country];
  return <CountryFlag width={30} height={30} />;
}

2.然后在需要渲染 .svg 图像时导入此组件并传递 flags 对象中定义的 country 属性。

import Flag from '../../Flag.js';

...
// will render Austria flag
<Flag country={'Austria'} /> 
...

通过名称在React-Native组件中导入多个SVG

2 个答案: