如何使React Native svgicon在iOS上工作

时间:2019-06-03 23:48:12

标签: reactjs svg icons native

我正在将react-native-svg(^ 9.4.0)和react-native-svg-icon(^ 0.8.1)库用于react native项目,以便提供一些图标

我有一个包含svg数据的文件,如下所示:

 func getItemDetails(parameter: PatientParameter, from: String) {

 APIService.PatientList.getPatientItemDetails(periodId: currentRemittance.periodId, doctorNumber: doctorNumber, parameterName: parameter, hospitalNumber: patient.hospitalNumber!, chargeId: from) { (getItem, error) in

        guard let pageItemDescription = getItem, error == nil else {
            SVProgressHUD.dismiss()
            return
        }

        switch parameter {
        case .selectedByChargedID:
            if self.patientPayoutDetails == nil {
                self.selectedPatientItemDescription = pageItemDescription
            }else {
                self.patientPayoutDetails.append(contentsOf: pageItemDescription.chargedId)
            }

        default: break
        }
        SVProgressHUD.dismiss()

        }
} 

像这样的图标文件

import React from 'react';
import { Svg, Path, Circle } from 'react-native-svg';
import Colors from '../util/Colors';

export default {
  SomeIcon: {
    svg: <Svg><Circle cx='29.5' cy='29.9' r='25' stroke={Colors.defaultIconOffColor}
                      fill={Colors.defaultIconOffColor} /><Path
        d='M38.7,19.49a4.91,4.91,0,0,0-1.38-.14H35.25c0-.17-.11-.34-.16-.5s-.16-.51-.25-.76a.69.69,0,0,0-.65-.49H32.55a3.2,3.2,0,0,0-2-2.27,3.1,3.1,0,0,0-3.43.94,3.24,3.24,0,0,0-.64,1.35H24.85a.69.69,0,0,0-.65.49c-.14.41-.27.83-.41,1.24H22.74c-.52,0-1.06,0-1.59,0a3.92,3.92,0,0,0-3,1.68,3.83,3.83,0,0,0-.67,2.2V40.8a3.9,3.9,0,0,0,.93,2.52,3.82,3.82,0,0,0,2.91,1.33H36.58a7.45,7.45,0,0,0,2.21-.16,3.85,3.85,0,0,0,2.7-3.81V23.28a.31.31,0,0,0,0-.1A3.89,3.89,0,0,0,38.7,19.49ZM30.93,17.2l0,0S30.92,17.18,30.93,17.2Zm-2.45-.35,0,0S28.46,16.87,28.48,16.85ZM24.93,20.2l0-.05.3-.93a2.58,2.58,0,0,0,.08-.26h1.78a.68.68,0,0,0,.67-.67,2.64,2.64,0,0,0,0-.28s0,0,0-.05a1.46,1.46,0,0,1,.05-.2c0-.05,0-.1,0-.15v0l.17-.31.05-.07h0l.08-.08a2.2,2.2,0,0,1,.27-.26h0a.71.71,0,0,1,.14-.1l.16-.08.05,0a3.37,3.37,0,0,1,.34-.09l.11,0h.5l.2,0,.17.06h0a2,2,0,0,1,.32.18l.07.05c.07,0-.06,0-.05,0s.12.09.14.11a3,3,0,0,1,.24.26h0s0,0,0,0l.1.17a1,1,0,0,1,.07.15l0,.1c0,.11.06.23.09.34v.26A.69.69,0,0,0,32,19h1.76c.12.39.25.79.38,1.19,0,0,0,0,0,.06.1.33.21.65.32,1H24.62Zm-5.09,1,0,0Zm-.5.5,0,0Zm-.3.53,0,0Zm0,19.55v0Zm1.29,1.33,0,0Zm18.33,0,0,0Zm1.51-18.57V41.14h0a3.24,3.24,0,0,1-.09.4l-.06.16,0,.09c0,.1,0,0,0,0s-.15.3-.17.34a.71.71,0,0,1-.1.14s-.11.19-.06.09,0,0,0,0l-.06.07a.86.86,0,0,1-.13.14,3,3,0,0,1-.26.24l-.06,0L39,43l-.32.16,0,0h0l-.21.07-.36.09H38l-.2,0H21l-.18,0-.39-.12h0l0,0L20.19,43a2.69,2.69,0,0,1-.32-.19l-.05,0-.14-.11a3.31,3.31,0,0,1-.26-.27l-.05-.07s-.06-.1,0,0-.05-.07-.06-.09a1.86,1.86,0,0,1-.19-.33L19,41.83v0l0-.08a2.91,2.91,0,0,1-.12-.39l0-.18h0v0c0-.1,0-.19,0-.28V23.27a2.53,2.53,0,0,1,0-.28s0-.23,0-.12,0-.08,0-.11a2.24,2.24,0,0,1,.1-.37l.06-.17v0c.06-.11.12-.23.19-.34l.1-.15v0h0a1.86,1.86,0,0,1,.27-.29l.13-.12h0l0,0,.32-.2.15-.09,0,0,.36-.12.19,0s.22,0,.12,0h2.35c-.11.33-.22.65-.32,1a.68.68,0,0,0,.65.85H33.91c.47,0,.94,0,1.41,0h0a.69.69,0,0,0,.49-.21.63.63,0,0,0,.2-.48v0a.47.47,0,0,0,0-.17c-.1-.32-.2-.64-.31-.95h2s.35,0,.38,0-.17,0,0,0l.13,0a2,2,0,0,1,.26.06l.22.07,0,0h0l-.06,0,.08,0h0l0,0a3.58,3.58,0,0,1,.42.25l0,0,0,0s.09.07.1.08l.2.18c.07.07.13.15.2.23s0,0,0,0a.85.85,0,0,1,.1.14l.15.25a.41.41,0,0,0,0,.09l0,.08c0,.07,0,.06,0,0s.07.2.09.26.06.2.08.3a.29.29,0,0,1,0,.09h0v0c0,.1,0,.21,0,.31Z' /><Path
        d='M37,26.8H23.89c-.6,0-1.21,0-1.81,0h0a.68.68,0,0,0,0,1.35H35.13c.61,0,1.22,0,1.82,0h0a.68.68,0,0,0,.67-.67A.69.69,0,0,0,37,26.8Z' /><Path
        d='M37,32.27H23.89c-.6,0-1.21,0-1.81,0h0a.68.68,0,0,0,0,1.35H35.13c.61,0,1.22,0,1.82,0h0a.68.68,0,0,0,.67-.67A.69.69,0,0,0,37,32.27Z' /><Path
        d='M32.26,37.74H22.05a.68.68,0,0,0,0,1.35H32.26a.69.69,0,0,0,.68-.67A.69.69,0,0,0,32.26,37.74Z' /></Svg>,
    viewBox: '0 0 60 60'
  }
}

图标将像这样显示

import React from 'react';
import SvgIcon from 'react-native-svg-icon';
import svgs from '../../../../assets/svgs';

const Icon = (props) => <SvgIcon {...props} svgs={svgs} />;

export default Icon;

在Android中,图标显示正常,但在ios中,图标却显示不正常;关于可能发生的事情的任何想法

0 个答案:

没有答案