react-native中使用svg图标

最新推荐文章于 2024-08-09 08:36:08 发布
最新推荐文章于 2024-08-09 08:36:08 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zdluoa/article/details/79951005
版权

在web开发中我喜欢svg图标：

    1、矢量图标，不会因屏幕大小失真；

    2、文件大小，svg图标比png图标小；

    3、灵活性，可以修改图标颜色，实现图标复用；

    所以在进行react-native开发的时候，在图标选择上，选择使用svg图标，在使用react-native时,通过Image require svg图片时，不会显示，搜索资料才知道，react-native不支持require "svg图片"，也不支持svg

在react-native中使用svg图标需要引入react-native-svg插件：    


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  zdluoa
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
react-native使用SVG

				
			

			

				

					qq_44041897的博客
				

				

					04-28
					
					1339
					
				

			

		

		

			
				
这是运行后的结果数字

			
		

	



                

              
                



	

		

			

				
					
ReactNative 引入SVG图片

				
			

			

				

					夏目三三
				

				

					07-04
					
					5661
					
				

			

		

		

			
				
一、将所有的SVG内容，打包到js文件中，以key-value的形式存储。1.使用脚本将所有SVG资源打包，脚本来源：react-native icon解决方案（svg）生成getSvg.js文件（脚本代码如下），与SVG文件夹放在同一级，并根据需要修改其中参数。如SVG路径：./svgs ，修改成自己的文件夹路径及名称；导出的目标文件：./Svgs.js 可以修改名称。//  getSvg.js...

			
		

	



                


  
              

                


	

		

			

				
					
如何在React Native中使用SVG

				
			

			

				

					xuxian的博客
				

				

					08-06
					
					1079
					
				

			

		

		

			
				
在React Native中使用SVG(可缩放矢量图形)可以大大提升应用程序视觉效果的质量。SVG具有分辨率独立性,可以在不损失质量的情况下进行缩放,这使它成为图标、标志和插图的绝佳选择。在本博客中,我们将探讨如何在React Native中使用SVG,并提供示例代码和有用资源的参考。要在React Native中使用SVG,我们将使用react-native-svg库。该库为React Native提供SVG支持,允许您将SVG文件作为React组件使用。

			
		

	





	

		

			

				
					
ReactNative 工程使用Svg

				
			

			

				

					m0_55599312的博客
				

				

					02-08
					
					726
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
react-native使用SVG图片

				
			

			

				

					diaojw090的博客
				

				

					04-08
					
					3866
					
				

			

		

		

			
				
react-native本身是不支持Image中require SVG图片的，需要借助插件react-native-svg 与 react-native-svg-uri来完成
步骤：
1.下载相关依赖包
npm install react-native-svg --save
npm install react-native-svg-uri --save


2.与react-native连接
re...

			
		

	





	

		

			

				
					
react-native-svg-icon：一个简单但灵活的SVG图标组件，用于React Native

				
			

			

				

					02-05
				

			

		

		

			
				
react-native-svg-icon
 一个简单但灵活的SVG图标组件，用于React Native。 。
安装
确保已安装
 npm i react-native-svg-icon --save
注意
0.8.0-仅支持 > = 5.3.0
 0.7.0-仅支持 > = 5.3.0
 0.6.0-仅支持 4.5.0
 0.5.0-仅支持 4.4.x
建立
创建您的SVG图标的对象
import React from 'react' ;
import { G , Path } from 'react-native-svg' ;
// Each nameValuePair can be:


			
		

	





	

		

			

				
					
article-react-native-art-svg:如何使用react-native渲染svg文件？

				
			

			

				

					05-18
				

			

		

		

			
				
如何使用React Native ART渲染SVG文件？  我们不会使用任何svg库，而是将利用库。  界面看起来像这样。   import { ART } from 'react-native' ; const {  Surface ,  Shape ,  Group ,  Text ,  Path ,  ...

			
		

	





	

		

			

				
					
react-native-svg-asset-plugin:用于在React Native中导入SVG图像的资源插件

				
			

			

				

					05-01
				

			

		

		

			
				
 用于React Native的资源插件，可将SVG与Image组件一起使用。 通过在编译时生成PNG并将其传递到地铁变压器的方式进行工作。   :mobile_phone: 如果您还想将SVG图像用作应用程序启动器图标，则可能需要签出 。 安装 ...

			
		

	





	

		

			

				
					
react-font-svg：用于react-native svg图标组件的字体

				
			

			

				

					02-05
				

			

		

		

			
				
 您可以使用此工具将字体转换为react / react-native Icon组件。  支持字体格式：  ttf  woff / woff2  OTF  ot 用法 npm install - g react - font - svg react - font - svg . / src / icons / fontawesome - ...

			
		

	





	

		

			

				
					
react-native-svg,用于react native的svg库。.zip

				
			

			

				

					10-11
				

			

		

		

			
				
React Native SVG库是一个强大的工具，它允许开发者在React Native应用中使用SVG（Scalable Vector Graphics）图形。SVG是一种基于XML的矢量图像格式，它能够创建清晰、可缩放的图形，无论在任何分辨率下都能保持高...

			
		

	





	

		

			

				
					
react-native-svg：用于React Native，React Native Web和普通React Web项目的SVG库

				
			

			

				

					02-26
				

			

		

		

			
				
react-native-svg
 react-native-svg为iOS和Android上的React Native提供SVG支持，以及Web的兼容性层。
特征
支持大多数SVG元素和属性（Rect，Circle，Line，Polyline，Polygon，G ...）。
 易于为react-native-svg。
安装
自动地
与expo-cli 
 :check_mark_button: 附带了本机代码！
 使用以下命令安装JavaScript： 
expo install react-native-svg
 :books: 有关更多信息，请参见。或跳至“ 。
与react-native-cli
 从npm安装库
yarn add react-native-svg
 链接本机代码
带有自动链接（React本机0.60+）
 cd ios && pod install
 前0.60 
react-native link react

			
		

	





	

		

			

				
					
reactnativesvg一个ReactNative的SVG库

				
			

			

				

					08-08
				

			

		

		

			
				
react-native-svg 一个React Native的SVG库

			
		

	





	

		

			

				
					
推荐开源项目：React Native SVG - 为React Native添加SVG支持

				
			

			

				

					gitblog_00047的博客
				

				

					03-20
					
					684
					
				

			

		

		

			
				
推荐开源项目：React Native SVG - 为React Native添加SVG支持
 react-native-svg项目地址:https://gitcode.com/gh_mirrors/rea/react-native-svg 项目简介
在Web开发中，SVG（Scalable Vector Graphics）因其可缩放性和丰富的图形能力而被广泛使用。而在移动应用开发领域，React...

			
		

	





	

		

			

				
					
React Native Icon方案：react-native-svg

				
			

			

				

					weixin_34356138的博客
				

				

					09-01
					
					516
					
				

			

		

		

			
				
原文地址：github.com/HuJiaoHJ/bl…
网上 React Native 的 icon 实现大都是使用iconfont方案，即：react-native-vector-icons
此方案存在一个问题：强依赖客户端打包，即每新增图标，就需要客户端重新打包，资源管理上不能做到 RN 与客户端解耦
为了避免这个问题，使用了SVG方案：react-native-svg 来实现Icon
接下...

			
		

	





	

		

			

				
					
在React-Native中使用Svg

				
			

			

				

					AnitaSun的博客
				

				

					03-28
					
					505
					
				

			

		

		

			
				
从网站上获取Svg的方法

地址： https://www.iconfont.cn/


找到你想要的图标

点击下载之后就下载到了本地
然后点击我的项目

把刚才的图标上传图标至项目，然后点击下载到本地

复制黄色的代码


在代码中使用
import SvgUri from 'react-native-svg-uri';
const female='<svg ......';
   
<SvgUri width="23" height="23" svgXmlData={female} /&g

			
		

	





	

		

			

				
					
强烈推荐：React Native SVG —— 拓展你的原生应用边界

					
最新发布

				
			

			

				

					gitblog_00473的博客
				

				

					08-09
					
					363
					
				

			

		

		

			
				
强烈推荐：React Native SVG —— 拓展你的原生应用边界
 react-native-svg项目地址:https://gitcode.com/gh_mirrors/rea/react-native-svg 在移动应用开发领域，React Native无疑是绕不开的热门框架。而今天，我们将深入探讨一个React Native生态中不可多得的强大组件——react-native-svg。...

			
		

	





	

		

			

				
					
如何使用react-native-svg和react-native-svg-transformer加载本地svg图片

				
			

			

				

					09-06
				

			

		

		

			
				
4. 接下来，在你的组件中，使用 `react-native-svg` 中的 `<SvgUri>` 组件来加载本地 SVG 图像。首先，确保你的 SVG 图像位于项目的 `assets` 文件夹中。  ```javascript import React from 'react'; import { View ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值