如何在react native中呈现svg？

请告诉我如何在react native（0.49）中呈现SVG文件。 先谢谢你

我尝试使用此库：

但它不起作用。 详细信息错误：

图片错误：

使用这个

要了解更多信息，请参阅此视频：

以下是解决方法：

index.js

import React, {Component} from 'react';
import{
  AppRegistry,
  StyleSheet
} from 'react-native';

import Pin from './classes/pin';

export default class MainPage extends Component {
  render(){
    return (
      <Pin />
    );
  }
}
AppRegistry.registerComponent('demo1', ()=> MainPage);

import React, {Component} from 'react';

import {
  StyleSheet,
  View,
  Text,
  AppRegistry
} from 'react-native';



import Back from '../icons/back.js';
import Deliver from '../icons/deliver.js';
import Heart from '../icons/heart.js';
import Elipse from '../icons/elipse.js';
import Thumbtack from '../icons/thumbtack.js';

export default class Pin extends Component{
    render(){
      return(
        <View style={styles.PinContainer}>
          <View style={styles.PinHeader}>
              <View style={styles.HeaderUitility}>
                <Back />
                <Heart />
                <Deliver />
                <Elipse />
              </View>

              <View style={styles.HeaderPinButtonContainer}>
                <View style={styles.PinButton}>
                  <Thumbtack style={styles.Pinpin}/>
                  <Text style={styles.PinText}>SAVE</Text>
                </View>
              </View>
          </View>
          <View style={styles.PinMiddle}>

          </View>

          <View style={styles.PinFooter}>

          </View>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  PinContainer:{
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#cecece'
  },

  PinHeader:{
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    height: 56,
    padding: 8,
    paddingBottom: 12
  },

  HeaderUitility:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  PinButton: {
    flexDirection: 'row',
    backgroundColor: 'red',
    padding:8,
    borderRadius: 6,
    justifyContent: 'space-around',
    width: 70
  },

  HeaderPinButtonContainer:{
    flex: 1,
    alignItems: 'flex-end',
  },

  PinText:{
    color: 'white',
  }

})

import React，{Component}来自'React'；
进口{
评估学，
样式表
}从“反应本机”；
从“./classes/Pin”导入Pin；
导出默认类主页面扩展组件{
render（）{
返回(
);
}
}
AppRegistry.registerComponent（'demo1'，（）=>MainPage）；

Pin.js

import React, {Component} from 'react';
import{
  AppRegistry,
  StyleSheet
} from 'react-native';

import Pin from './classes/pin';

export default class MainPage extends Component {
  render(){
    return (
      <Pin />
    );
  }
}
AppRegistry.registerComponent('demo1', ()=> MainPage);

import React, {Component} from 'react';

import {
  StyleSheet,
  View,
  Text,
  AppRegistry
} from 'react-native';



import Back from '../icons/back.js';
import Deliver from '../icons/deliver.js';
import Heart from '../icons/heart.js';
import Elipse from '../icons/elipse.js';
import Thumbtack from '../icons/thumbtack.js';

export default class Pin extends Component{
    render(){
      return(
        <View style={styles.PinContainer}>
          <View style={styles.PinHeader}>
              <View style={styles.HeaderUitility}>
                <Back />
                <Heart />
                <Deliver />
                <Elipse />
              </View>

              <View style={styles.HeaderPinButtonContainer}>
                <View style={styles.PinButton}>
                  <Thumbtack style={styles.Pinpin}/>
                  <Text style={styles.PinText}>SAVE</Text>
                </View>
              </View>
          </View>
          <View style={styles.PinMiddle}>

          </View>

          <View style={styles.PinFooter}>

          </View>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  PinContainer:{
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#cecece'
  },

  PinHeader:{
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    height: 56,
    padding: 8,
    paddingBottom: 12
  },

  HeaderUitility:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  PinButton: {
    flexDirection: 'row',
    backgroundColor: 'red',
    padding:8,
    borderRadius: 6,
    justifyContent: 'space-around',
    width: 70
  },

  HeaderPinButtonContainer:{
    flex: 1,
    alignItems: 'flex-end',
  },

  PinText:{
    color: 'white',
  }

})

import React，{Component}来自'React'；
进口{
样式表，
看法
文本，
评价学
}从“反应本机”；
从“../icons/Back.js”导入回；
从“../icons/Deliver.js”导入Deliver；
从“../icons/Heart.js”导入心脏；
从“../icons/Elipse.js”导入Elipse；
从“../icons/Thumbtack.js”导入图钉；
导出默认类Pin扩展组件{
render（）{
返回(
拯救
)
}
}
const styles=StyleSheet.create({
PinContainer：{
弹性：1，
自我定位：“拉伸”，
背景颜色：“#cecece”
},
针头：{
flexDirection:'行'，
背景颜色：“白色”，
对齐项目：“柔性端”，
justifyContent:'之间的空间'，
身高：56，
填充：8，
垫底：12
},
校长资格：{
弹性：1，
flexDirection:'行'，
justifyContent:“间距”
},
按钮：{
flexDirection:'行'，
背景颜色：“红色”，
填充：8，
边界半径：6，
为内容辩护：“周围的空间”，
宽度：70
},
头部按钮容器：{
弹性：1，
对齐项目：“柔性端”，
},
PinText:{
颜色：'白色'，
}
})

SVG文件：

后退按钮：

import React，{Component}来自'React'；
导入Svg{
圆圈
椭圆，
G
线性梯度，
径向梯度，
行,，
路径
多边形，
多段线，
直肠，
符号，
文本，
使用，
藐视，
停止
}来自“react native svg”；
将默认类导出回扩展组件{
render（）{
返回(
);
}
}

交付图标：

import React，{Component}来自'React'；导入Svg{
圆圈
椭圆，
G
线性梯度，
径向梯度，
行,，
路径
多边形，
多段线，
直肠，
符号，
文本，
使用，
藐视，
从'react native svg'停止}；
导出默认类传递扩展组件{
render（）{
返回(
);
} }

心脏图标：

import React，{Component}来自'React'；
导入Svg{
圆圈
椭圆，
G
线性梯度，
径向梯度，
行,，
路径
多边形，
多段线，
直肠，
符号，
文本，
使用，
藐视，
停止
}来自“react native svg”；
导出默认类扩展组件{
render（）{
返回(
);
}
}

---

请提供更多的细节。我使用这个，但出现了一些错误，如上图。我建议不要使用SVG，直到苹果引入了对SVG的本机支持。

import React, {Component} from 'react';
import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop
} from 'react-native-svg';

export default class Heart extends Component {
    render() {
        return (
            <Svg height="26.5" width="32">
            <Path d="M12.5,25.1c0.9,0.9,2.2,1.4,3.4,1.4c1.2,0,2.5-0.4,3.4-1.4l10.1-10c3.5-3.5,3.5-9.1,0-12.5
c-3.5-3.5-9.1-3.5-12.5,0L16,3.5l-0.9-0.9C11.6-0.9,6-0.9,2.6,2.6c-3.5,3.5-3.5,9.1,0,12.5L12.5,25.1z"/>
            </Svg>
        );
    }
}