首页 前端知识 ReactNative 工程使用Svg

ReactNative 工程使用Svg

2024-06-17 09:06:12 前端知识 前端哥 801 763 我要收藏

前言

`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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12499.html
标签
react native
评论
发布的文章

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!