SVG圖像反應原生

我想在反應本地使用svg圖像。我正在使用WebView來顯示法師。但滾動時顯示一些波動。這裏是我的示例代碼中：SVG圖像反應原生

'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圖像？

來源

2016-03-08 Ritesh Bansal

http://stackoverflow.com/a/34734113/1206613 – Cherniv

@Cherniv我已經通過這個鏈接。它正在使用WebView，但在滾動時顯示波動。使用svg圖像反應原生是一件壞事？ –

首先從SVG創建圖標。您可以從IcoMoon創建圖標。之後在您的項目中使用react-native-vector-icons。您必須正確遵循安裝步驟。之後，您可以在您的應用程序中使用自定義字體圖標。

來源

2016-07-10 04:22:18

SVG圖像反應原生

回答

相關問題