如何高效管理 React Native 專案中的圖片資源

Marno發表於2019-03-01
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 哈！）

相關文章