JSX - 如何将图标放在 svg 圆圈内，本地反应

Question

我一直在尝试将图标(http://fontawesome.io/icons/(放在 svg 圈内，在 react native 中，但它不起作用。我在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>
    )
  }
}