React Native загрузить несколько изображений SVG - PullRequest
Новая
       21

React Native загрузить несколько изображений SVG

0 голосов
/ 06 марта 2019

Для проекта в формате native я должен отображать много изображений SVG.
Я могу импортировать мои файлы как компоненты и отображать их в моем виде следующим образом: 

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

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

Но я не могу написать это вручную для каждого изображения.
Поэтому я попытался использовать SvgUri act-native-svg для локальных файлов. 

import SvgUri from 'expo';

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

Но я застрял с инвариантным нарушением .
После некоторых исследований комментарии и текст в файле SVG могут привести к такого рода ошибкам, но после удаления комментариев и других вещей у меня все еще остается та же ошибка.

Есть ли способ в реагировать на родной язык для отображения большого количества файлов SVG без необходимости вручную записывать импорт 300?

Обновление 1: 

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

По-прежнему выдают мне ту же ошибку.

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Или вы можете настроить этот скрипт Python, чтобы сделать работу за вас

Отказ от ответственности: Я являюсь автором svg-icon-generator

0 голосов
/ 06 марта 2019

Мне, наконец, удается обернуться.
Я использовал icomoon.io , чтобы делать иконки с каждым моим SVG, который у меня есть.А затем использовал act-native-vector-icons , чтобы загрузить их в виде значка.
Если кто-нибудь когда-нибудь найдет лучшее решение, мне действительно интересно.

  1. Установить: npm установить response-native-vector-icons --save

  2. Создать иконки: icomoon.io

  3. Поместите selection.json и ваш font.ttf в ваш проект

  4. Загрузите шрифт:

код: 

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"/>
...