SVG Изображение в ответе родное

Question

Я хочу использовать svg-образ в реакции-native. Я использую WebView для отображения мага. Но при прокрутке он показывает некоторые колебания. Вот мой пример кода:

'use strict'; 
var React = require('react-native'); 
var {AppRegistry,Alert,WebView,View,ScrollView} = React; 

var Sample = React.createClass({ 
    render: function() { 
     var data = [ 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"}, 
      {uri: "http://www.kameleon.pics/img/pill-svg.svg"} 
     ]; 
     var dataToShow = data.map((record, index)=> { 
      return (
       <WebView key={`ic_`+index} source={{uri:record.uri}} style={{height:80,width:80}}></WebView> 
      ) 
     }); 
     return (
      <ScrollView> 
       {dataToShow} 
      </ScrollView> 
     ); 
    } 
}); 
AppRegistry.registerComponent('MyApp',() => Sample); 

Есть ли другой способ лучше, чем WebView использовать SVG изображение?

Answer 1

Прежде всего создайте значки из SVG. Вы можете создавать значки от IcoMoon. После этого используйте в своих проектах react-native-vector-icons. Вы должны правильно выполнить шаги установки. После этого вы можете использовать свои собственные значки шрифтов в своем приложении.