通過 react-native 組件中的名稱導入多個 SVG

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 傳遞給組件來有條件地渲染 a.svg 文件，您可以這樣做：

假設您有一些標志，並且您想在給定國家名稱的情況下渲染 svg 圖像。

1. 將所有標志導入到一個名為 flags.js 的文件中，創建一個標志 object 以便您可以將密鑰傳遞給您的標志組件； 以及稍后要導入的標志組件：

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 圖像並傳遞標志 object 中定義的國家/地區屬性時導入此組件。

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

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