JSX - 如何将图标放在 svg 圆圈内，反应原生答案

【问题标题】：JSX - How put icons inside svg circle, react nativeJSX - 如何将图标放在 svg 圆圈内，反应原生
【发布时间】：2017-06-29 04:25:24
【问题描述】：

我一直在尝试将图标 (http://fontawesome.io/icons/) 放在一个 svg 圆圈内，以做出本机反应，但它不起作用。我在 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>

【问题讨论】：

尝试如何？你没有向我们展示你在做什么，所以我们怎么知道你做错了什么。
对不起，刚刚编辑了帖子，感谢您的宝贵时间
不希望标签是而不是吗？此外，将您的图标放在圆圈内也永远不会起作用。它必须是的兄弟
我刚试过，它确实编译了，但它没有显示图标。

标签： svg react-native jsx

【解决方案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>
    )
  }
}

【讨论】：