数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

如何高效管理 React Native 项目中的图片资源

前言

刚开始写 React Native 项目的时候,并没有刻意的去管理图片资源,用到了哪张图就直接写一个相对引用地址。但是当项目中的图片资源逐渐多起来以后,我发现麻烦来了。无论是修改图片名称,还是替换图片都比较麻烦。

那么在 React Native 项目中如何管理图片才显得比较有效率呢?结合网上一些博主们写的文章,以及自己开发项目的经验,大概总结成了一下几点。

工具

首先是开发工具的选择,我用的是 WebStrom,一是我用习惯了 JetBrains 全家桶,二是它真的好用,而且在管理图片方面,它有以下几个优点:

图片跳转

按 commond(或ctrl)键,点击图片的引用地址,会自动跳转到该图片资源。如果发现不能正常跳转,最好检查下是不是把路径搞错了。

全局重命名

重命名某个图片的时候,会自动查找所有的引用,并将所有引用地址中的名字也一起重命名(重命名图片时,尽量将 server 关闭)

删除保护

很多人在用文本编辑器写 RN,但是如果在开发过程中,一不小心将一张正在使用的图片删除了,那么文本编辑器是不会给任何提示的,但是 WebStrom 会自动查找该图片是否正在被使用,如果是,便会列出所有引用地址。不会导致误删除。

图片预览

安装 IconViewer 插件后,就可以直接在工程目录树结构中预览所有图片资源,这样找起图片来的时候也比较直观。至于 WebStrom 如何安装插件,可以自行百度下。

代码

工具部分说完了,接着再说下从代码上如何管理图片资源,废话不多说,直接往下看。

创建文件

首先按照下图的文件结构,创建对应的目录和文件(名字随意,易懂就好)

  • resource:存放项目中用到的各种资源

  • imgs:存放图片的文件夹

  • Images.js:图片管理类

  • index.js:入口文件

编辑 Images.js


导出使用

在 index.js 文件中导出组件

在其他文件中调用

注意

路径处理

require 中的图片名字必须是一个静态字符串。如果需要根据业务逻辑动态获取,应将条件判断的语句放到 require 外。

多分辨率

在 React Native 项目中,如果需要适配不同分辨率的屏幕,则需要采用 iOS 上对图片命名的方式,不同分辨率之间用 @2x、@3x 来区分(如:image@2x.png,image@3x.png),这样系统会自动根据屏幕分辨率去选择该分辨率所对应的图片。

这里顺便强调下在 iOS 上和 Android 上几种分辨率的对应关系,有且只有以下几种分辨率,如果用 @3.5x 之类的可能会导致程序奔溃(目前 @2x 的分辨率比较多)。

iOSAndroid
@0.75xldpi
@1xmdpi
@1.5x

hdpi

@2xxhdpi
@3xxxhdpi
@4xxxxhdpi

图片优化

在 App 发布之前,我们可以将一些体积较大的图片资源进行压缩,以减小安装包体积,相信做移动开发的人都知道这个网站 tinypng.com。这里推荐一个插件 TinyPic,官方插件商店可以搜到,附上使用指南 https://github.com/shenjiajun53/TinyPic

总结

工具再智能也只是一种辅助,只有我们自己养成良好的编码习惯,才能高效的管理项目资源,我实在编不下去了.....就这样吧!哈哈~


原文来自:Marno

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道
如何高效管理 React Native 项目中的图片资源
发布:2017-08-28

前言

刚开始写 React Native 项目的时候,并没有刻意的去管理图片资源,用到了哪张图就直接写一个相对引用地址。但是当项目中的图片资源逐渐多起来以后,我发现麻烦来了。无论是修改图片名称,还是替换图片都比较麻烦。

那么在 React Native 项目中如何管理图片才显得比较有效率呢?结合网上一些博主们写的文章,以及自己开发项目的经验,大概总结成了一下几点。

工具

首先是开发工具的选择,我用的是 WebStrom,一是我用习惯了 JetBrains 全家桶,二是它真的好用,而且在管理图片方面,它有以下几个优点:

图片跳转

按 commond(或ctrl)键,点击图片的引用地址,会自动跳转到该图片资源。如果发现不能正常跳转,最好检查下是不是把路径搞错了。

全局重命名

重命名某个图片的时候,会自动查找所有的引用,并将所有引用地址中的名字也一起重命名(重命名图片时,尽量将 server 关闭)

删除保护

很多人在用文本编辑器写 RN,但是如果在开发过程中,一不小心将一张正在使用的图片删除了,那么文本编辑器是不会给任何提示的,但是 WebStrom 会自动查找该图片是否正在被使用,如果是,便会列出所有引用地址。不会导致误删除。

图片预览

安装 IconViewer 插件后,就可以直接在工程目录树结构中预览所有图片资源,这样找起图片来的时候也比较直观。至于 WebStrom 如何安装插件,可以自行百度下。

代码

工具部分说完了,接着再说下从代码上如何管理图片资源,废话不多说,直接往下看。

创建文件

首先按照下图的文件结构,创建对应的目录和文件(名字随意,易懂就好)

  • resource:存放项目中用到的各种资源

  • imgs:存放图片的文件夹

  • Images.js:图片管理类

  • index.js:入口文件

编辑 Images.js


导出使用

在 index.js 文件中导出组件

在其他文件中调用

注意

路径处理

require 中的图片名字必须是一个静态字符串。如果需要根据业务逻辑动态获取,应将条件判断的语句放到 require 外。

多分辨率

在 React Native 项目中,如果需要适配不同分辨率的屏幕,则需要采用 iOS 上对图片命名的方式,不同分辨率之间用 @2x、@3x 来区分(如:image@2x.png,image@3x.png),这样系统会自动根据屏幕分辨率去选择该分辨率所对应的图片。

这里顺便强调下在 iOS 上和 Android 上几种分辨率的对应关系,有且只有以下几种分辨率,如果用 @3.5x 之类的可能会导致程序奔溃(目前 @2x 的分辨率比较多)。

iOSAndroid
@0.75xldpi
@1xmdpi
@1.5x

hdpi

@2xxhdpi
@3xxxhdpi
@4xxxxhdpi

图片优化

在 App 发布之前,我们可以将一些体积较大的图片资源进行压缩,以减小安装包体积,相信做移动开发的人都知道这个网站 tinypng.com。这里推荐一个插件 TinyPic,官方插件商店可以搜到,附上使用指南 https://github.com/shenjiajun53/TinyPic

总结

工具再智能也只是一种辅助,只有我们自己养成良好的编码习惯,才能高效的管理项目资源,我实在编不下去了.....就这样吧!哈哈~


原文来自:Marno

电话 0512-88869195
数 据 驱 动 未 来
Data Drives The Future