React Native加载多个SVG图像

Question

对于本机的反应项目，我需要显示很多SVG图像。 我可以将我的文件导入为组件，并以这种方式在我的视图中显示它：

import Logo from './assets/interface/logo.svg';

<Logo
 width={200}
 height={200}
/>

但我无法手工为每张图片编写。 这就是为什么我试图使用qzxswpoi的SvgUri作为本地文件。

react-native-svg

但我遇到了

import SvgUri from 'expo';

<SvgUri
  width="200"
  height="200"
  source={{
    uri: './assets/interface/logo.svg'
  }}
/>

。 经过一些研究，SVG文件中的注释和文本可能导致这种错误，但在删除注释和其他东西之后我仍然有同样的错误。

有没有办法反应原生显示大量的SVG文件，而不必手动编写300导入？

更新1：

invariant violation

仍然给我同样的错误。

Answer 1

或者你可以自定义require('./assets/interface/logo.svg') python脚本来为你完成这项工作

免责声明：我是svg-icon-generator的作者

Answer 2

我终于设法扭转局面了。 我使用this用我的每个svg制作图标。然后使用icomoon.io将它们加载为图标。 如果有人找到了更好的解决方案，我真的很感兴趣。

1. 安装：npm install react-native-vector-icons --save
2. 创建你的图标：react-native-vector-icons
3. 将selection.json和font.ttf放在项目中
4. 加载字体：

代码：

icomoon.io

5. 导入并使用您的SVG

代码：

import icoMoonConfig from './assets/fonts/selection.json';
const Icon = createIconSetFromIcoMoon( icoMoonConfig );