Question

我一直试图将图标（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>

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>
    )
  }
}

JSX - 如何将图标放在svg圈内，做出反应原生

1 个答案: