如何高效管理 React Native 項目中的圖片資源

• 本文爲 Marno 原創，轉載必須保留出處！
• 公衆號【 Marno 】，關注後回覆 RN 加入交流羣
• React Native 優秀開源項目大全：www.marno.cn

---

今天是情人節了，Marno 祝有"對象"的情人節快樂，沒對象的 new 一個對象，而後情人節快樂。哈哈~

前言

剛開始寫 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，官方插件商店能夠搜到，附上使用指南：github.com/shenjiajun5…

總結

工具再智能也只是一種輔助，只有咱們本身養成良好的編碼習慣，才能高效的管理項目資源，我實在編不下去了.....就這樣吧！哈哈~

歡迎在評論區回覆本身管理項目圖片的心得，或者搜索關注個人公衆號 Marno，公衆號回覆 RN ，加入 RN 交流羣 一塊兒討論。（是 RN ，不是 Run 哈！）

---