JSX - どのようにsvgサークル内のアイコンを入れて、ネイティブに反応するのですか？

Question

私はアイコンネーム（http://fontawesome.io/icons/）を反応ネイティブに入れようとしていますが、うまくいきません。私はJSXで働いています。また、円の枠の隣にアイコンを置く必要がありますか？

 <Svg style={{flex:1}}> 
      <g> 
       <Circle 
        cx={window.width/2} 
        cy={window.height/2.5} 
        r={window.width/2.1} 
        fill="grey" 
        fillOpacity= {0.3} 
        stroke="black" 
        strokeWidth="2.5" 
       > 
       <Icon name="minus-circle" style={{fontSize: 20}}/> 
       </Circle> 
      </g> 
     </Svg> 

Answer 1

これは同じ問題を抱えている人の例です。

react-native-svgがcreate-react-native-appプロジェクトに自動的にインストールされることに注意してください。

import React, { Component } from 'react'; 

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

import Svg, { Circle } from 'react-native-svg'; 

import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 

export default class IconButton extends Component { 
    _onPress() { 
    console.log("pressed") 
    } 

    render() { 
    return (
     <View> 
     <TouchableOpacity onPress={this._onPress}> 
      <Svg height="100" 
       width="100" 
       style={{alignItems: "center", justifyContent: 'center'}}> 
      <Icon name="upload" size={45}/> 
      <Circle 
       cx="50" 
       cy="50" 
       r="45" 
       fill="gray"/> 
      </Svg> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 
}