react native react.js javascript typescript 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;

export default content;

}

使用

import * as React from 'react'

import {View} from 'react-native'

import {SvgXml} from 'react-native-svg'

const SvgIcon = (props) => {

return

}

export default SvgIcon

好文推荐