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

Marno發表於2019-03-01
  • 本文為 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.pngimage@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 哈!)


相關文章