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文件中的注释和文本可能导致这种错误，但是在删除注释和其他内容之后，我仍然遇到相同的错误。

有没有一种方法可以在本机反应中显示很多SVG文件，而无需手动编写300个导入？

更新1：

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

还是给我同样的错误。

Answer 1

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

安装： npm install 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图像

2 个答案: