Требовать SVG в реакции-native

Я создал простой компонент, который отображает SVG-изображения внутри WebView. Это хорошо работает, когда я получаю SVG с удаленного сервера. Тем не менее, я хотел бы включить SVG в свой комплект и потребовать его от моего компонента. Использование require('image.svg') результатов в Невозможно решить модуль сообщение об ошибке.Требовать SVG в реакции-native

источник

2016-01-31 danielbuechele

Сохранить файл SVG, как .txt entension, или, может быть, .xml – kar

@kar Это дает мне такая же ошибка. То, что я могу сделать, это встроить SVG как строку в файл js: 'export default ' danielbuechele

У меня была аналогичная проблема, и я заметил, что путь, отображаемый в ошибке, был не совсем прав. Я должен был сделать require('./image.svg'), или если вы поместите его в отдельную папку, скажем, активы, это будет require('./assets/image.svg'). Этот относительный путь должен определяться из любого файла, в котором вы находитесь, конечно. Так что если вы находитесь в index.ios.js и захотите потребовать файл изображения со следующей структурой папок: . ├── index.ios.js └── assets ├── image.svg └── image2.png require('./assets/image.svg'). Надеюсь это поможет!

источник

2016-02-01 15:24:33 jkwok

Точное сообщение об ошибке, которое я получаю: 'Невозможно разрешить модуль ../images/image.svg из [...]: Недействительный каталог [...]'. Однако путь, указанный в сообщении об ошибке, является правильным. Кроме того, он работает для png-изображений. – danielbuechele

Возможно, это проблема с тем, как SVG передается, когда вы требуете его, а не извлекаете его с сервера. Проверьте этот [PR] (https://github.com/facebook/react-native/pull/542), найденный в первом ответе [this stackoverflow] (http://stackoverflow.com/questions/29289178/react- native-and-svgcode-sample) о способах размещения вашего SVG в WebView. – jkwok

-2

Попробуйте это решение, он может создать реакцию компонентов из ваших SVG файлов https://github.com/necinc/msvgc

Это работает для меня

MSVGC

Utils для генерации реакции компонентов из простых SVG файлов (совместим с реакционно-родными)

Установка:

# install package globally 
npm install -g msvgc 
Usage: 

# provide for utils 
msvgc -f ./path/to/pic.svg -o ./svgComponents/ 
--react-native flag create components using react-native-svg library 

--typescript flag will using react importing like in typescript (import * as React)

Затем использовать сгенерированные компоненты в ваших JSX/TSX файлов:

[...] 

import Pic from './svgComponents/Pic' 

class MyComponent extends Component { 
    render() { 
    return (
     <div> 
     <Pic width={300} height={100} /> 
     <p>Lorem ipsum...</p> 
     </div> 
    ); 
    } 
} 

[...]

источник

2016-11-11 12:55:51 chill199

Требовать SVG в реакции-native

ответ

Смежные вопросы