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

• 本文为 Marno 原创，转载必须保留出处！
• 公众号【 Marno 】，关注后回复 RN 加入交流群
• React Native 优秀开源项目大全：http://www.marno.cn

---

前言

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

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

工具

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

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

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

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

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

代码

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

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

• resource：存放项目中用到的各种资源（图片，颜色，通用样式等）
• imgs：存放图片的文件夹
• Images.js：图片管理类
• index.js：入口文件

编辑 Images.js

/**
 * Created by marno on 2017/4/6
 * Function:图片管理类
 */
export default {
  
    //为了区分图片，此处按照不同的功能板块将图片分类
    //Common
    common: {
        ic_avatar: require('./imgs/avatar.jpg'),
        ic_back: require('./imgs/back.png'),
    },

    //主页
    home: {
        ic_light_off: require('./imgs/scanLigtOff.png'),
        ic_light_on: require('./imgs/scanLightOn.png'),
        ic_manual_input: require('./imgs/manualInput.png'),
        ......
    },


    .....
}

导出使用
在 index.js 文件中导出组件

import Images from './Images'

export { Images}

在其他文件中调用

import {Images} from "../../resource/";

export default class Home extends Component {
    render(){
        return(
            <View style={styles.container}>
                 <Image source={Images.common.ic_avatar}>
            </View>
        );
    }
}

注意

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

// 正确
<Image source={require('./my-icon.png')} />

// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

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

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

iOS	Android
@0.75x	ldpi
@1x	mdpi
@1.5x	hdpi
@2x	xhdpi
@3x	xxhdpi
@4x	xxxhdpi

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

总结

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

欢迎在评论区回复自己管理项目图片的心得，或者搜索关注我的公众号 Marno，公众号回复 RN ，加入 RN 交流群 一起讨论。（是 RN ，不是 Run 哈！）

---