Question

我想在react-native中使用svg image。我正在使用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。您必须正确执行安装步骤。之后，您可以在应用中使用自定义字体图标。

SVG Image in native native

1 个答案: