ReactNative 工程使用Svg

前言

`ReactNative` 中会用`Svg`作为一个比较普遍的需求，带大家来实现。

我们都知道设计在出图的时候，会有区分一倍多倍图。这样就带来了一个问题，在大屏幕使用小图的时候出现图片模糊失真的情况发生。这时候 Svg 使用是一个很好方案，下面已RN工程为例。

安装库

# 主库

npm install react-native-svg --save

# babel解析库， 为了兼容开发环境，大家根据需求来配置

npm install babel-plugin-inline-import --save-dev

配置

在项目里的babel.config.js配置如下

module.exports = {

  # 配置babel解析插件
  plugins: [
    
    [
      'babel-plugin-inline-import',
      {
        extensions: ['.svg'],
      },
    ],
};

在项目src下添加declarations.d.ts，为了兼容引入本地svg不会ts工程不会报错。

# declarations.d.ts

declare module '*.svg' {
  import React from 'react';
  import { SvgProps } from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

使用

import * as React from 'react'
import {View} from 'react-native'
import {SvgXml} from 'react-native-svg'

const SvgIcon = (props) => {
    
    
    return <View style={{flex: 1}}>
            <SvgXml xml={props.xml} {...props} />
    </View>
}  

export default SvgIcon