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 文件中的评论和文本可能会导致此类错误，但在删除评论和其他内容后，我仍然遇到同样的错误。

有没有一种方法可以在 React Native 中显示大量 SVG 文件而无需手动编写 300 个导入？

更新 1：

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

还是报同样的错误

Answer 1

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

安装： npm 安装 react-native-vector-icons --save
创建您的图标：icomoon.io
将 selection.json 和您的 font.ttf 放入您的项目
加载字体：

代码：

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

导入并使用您的 SVG

代码：

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

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

Answer 2

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

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

React Native 加载多个 SVG 图像

React Native load multiple SVG image

svg

sti

react-native