Реагируй нативный дисплей SVG из файла

Question

Реагируй нативный дисплей SVG из файла

Как отобразить изображение SVG, которое я require() в React Native.

https://github.com/brentvatne/react-native-svgkit Не находится в активной разработке.
https://github.com/magicismight/react-native-svg Не могу понять, как загрузить файл.
WebView (или Bridged WebView) Не могу понять, как загрузить требуемый файл.

Какой лучший способ просто отобразить изображение (не нужно манипулировать им).

Или я должен просто преобразовать его в PNG вместо этого?

13

react-native svg

Источник

user5498949 08 май '16 в 09:21

3 ответа

Другие вопросы по тегам react-native svg

user1559386 01 июн '16 в 21:29 2016-06-01 21:29 · Answer 1 · 2016-06-01 21:29

Преобразование в png - самое простое решение. Изображения SVG перечислены в ProductPains как болевая точка, и вы можете заявить об этом, если увидите необходимость, но на данный момент не существует замечательного готового решения для изображений SVG.

user5498949 02 июн '16 в 17:19 2016-06-02 17:19 · Answer 2 · 2016-06-02 17:19

Вы можете взломать это с помощью веб-просмотра. Я также должен был поместить свои SVG-файлы в виде строк в файлы.js (что совсем не хорошо). Но это работает довольно надежно. Есть доля секунды, когда они выглядят белыми перед загрузкой SVG, но для меня этого достаточно.

Примерно что-то вроде:

import React, { View, WebView } from 'react-native'
import s from 'string'

const firstHtml = '<html><head><style>html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>'
const lastHtml = '</body></html>'
export default (props) =>
  <View style={props.containerStyle}>
    <WebView
      style={[{ width: 200, height: 100, backgroundColor: props.backgroundColor }, normalizeStyle(props.style)]}
      scrollEnabled={false}
      source={{ html: `${firstHtml}${props.svgContent}${lastHtml}` }}
    />
  </View>

user4322261 17 сен '18 в 12:32 2018-09-17 12:32 · Answer 3 · 2018-09-17 12:32

Вы можете отобразить небольшой файл SVG в качестве данных, используя эту библиотеку,

Примечание. Большие изображения SVG отображаются неправильно.

нпм я реагирую родной удаленный svg

import Image from 'react-native-remote-svg'

<Image
 source={{
uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 
width="100px" height="100px"  viewBox="0 0 100 100">
     <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" 
fill="green"  stroke="#00FF00" stroke-width ="2" />
   </svg>`
}}
style={{ width: 100, height: 100}}
/>

Если вы хотите отображать изображения любого размера удаленно с помощью вышеуказанной библиотеки, а затем сделайте это,

<Image
  source={{ uri: 'https://example.com/my-pic.svg' }}
  style={{ width: 200, height: 532}}
/>

Но если вы использовали этот файл для отображения локального файла SVG, то у вас возникнут некоторые проблемы в Android, когда вы соберете пакет и выпустите релиз.

import Image from 'react-native-remote-svg'
<Image source={require('./image.svg')} />

или вы можете использовать Icomoon (для небольших изображений SVG / иконки),

Рекомендуется: используйте Icomoon для иконок и небольших изображений SVG

Смотрите это видео, чтобы настроить icomoon в реагировать родной