React Native 加载多个 SVG 图像

Question

对于 react native 的项目，我需要显示大量的 SVG 图像。
我可以将我的文件作为组件导入并以这种方式在我的视图中显示：

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

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

但我不能为每张图片都手写。
这就是为什么我尝试对本地文件使用 react-native-svg 的 SvgUri。

import SvgUri from 'expo';

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

但我被 invariant violation 卡住了。
经过一些研究，SVG 文件中的 cmets 和 text 可能会导致这种错误，但在删除 cmets 和其他内容后，我仍然有同样的错误。

有没有办法在 react native 中显示大量 SVG 文件而无需手动编写 300 导入？

更新 1：

require('./assets/interface/logo.svg')

仍然给我同样的错误。

Answer 1

或者您可以自定义this python 脚本来为您完成这项工作

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

Answer 2

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

1. 安装： npm install react-native-vector-icons --save

2. 创建您的图标：icomoon.io

3. 将 selection.json 和您的 font.ttf 放入您的项目中

4. 加载字体：

代码：

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

5. 导入和使用您的 SVG

代码：

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

<Icon name="logo" size={130} color="#000"/>