RN圖片實踐參考

RN圖片實踐參考

本文檔介紹了RN中圖片展現方式，從幾個方面介紹

• 圖標的展現方案
• 實踐參考
• 附上原生展現圖片方式介紹做爲補充

適合新手食用。

圖標

圖標不建議使用位圖，參考網上的實戰經驗，使用柵格圖片可能會：

1. 渲染不及時,於是在頁面出現時圖標留白一下子。
2. 須要爲不一樣尺寸的屏幕準備對應資源，app size變大。

有兩個方案，使用svg和iconfont。

svg

react-native自己不支持svg， react-native-svg是社區提供的解決方案。使用也很直觀，語法上能夠看成一個組件來使用。

安裝見github

使用

庫自己提供基本的圖案，如矩形，點……

若要使用自定義svg圖案，有兩種方式

方案一：轉換成js文件引入

1. 把svg文件轉換成js文件

https://github.com/smooth-cod...

1. 引入文件，當成component使用

import SvgCookie from '../assets/imgs/svg/Cookie'
<SvgCookie width={100} height={240} />

方案二：使用transform直接引入svg文件

須要配置metro.config.js文件，見 react-native-svg-transformer
此方案更簡單，能夠直接使用svg文件。

import BalloonSVG from '../assets/imgs/svgSrc/hot-air-balloon.svg'
<BalloonSVG width={100} height={240} />

這是被react-native-svg推薦的方式，目前（我的）不清楚metro文件的做用機制，須要考慮可維護性。

可能遇到的問題：

• requireNativeComponent: "RNSVGDefs" was not found in the UImanager.
  參考 https://github.com/vault-deve...

iconfont

react-native-vector-icons

iconfont也是使用圖標的一種經常使用方式，使用起來最簡單

<Icon name={'home'} size={26} color="red"/>

然而不支持多色。

庫內置iconfont可以使用，項目自定義圖標須要經過命令行把css和ttf文件生成組件文件。

iconfont和svg並不衝突，看項目須要，也可並存。

圖片實踐參考

調整圖片尺寸

width 和height 屬性可設置圖片大小，
resizeMode決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。

自適應方案

使用flex佈局

父元素使用flex佈局，圖片子元素設置百分比，同時設置resizeMode 調整比例。

根據屏幕大小計算

根據圖片高寬和設備高寬的比例來調整。
如但願圖片佔據屏幕寬80%，

比率 = 設備寬 / 圖片寬
縮放後圖片寬 = 設備寬 * 0.8
縮放後圖片高 = 圖片高 * 比率 * 0.8

第三方

react-native-fast-image 庫可更好地處理緩存，而且提供了preload，指定優先級的功能。

背景圖

可以使用RN中ImageBackground 組件，把須要背景圖的子組件嵌入其中便可，它有着和Image組件同樣的props。
源碼很簡單，有特殊需求，也可本身實現。

原生使用

原生提供下面幾種方式展現圖片：

• 靜態圖片資源
• 使用混合App的圖片資源
• 網絡圖片
• base64編碼
• 系統相冊獲取

靜態圖片資源

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

自動匹配平臺

圖片文件的查找會和JS模塊的查找方式同樣。
若是你有`my-icon.ios.png`和`my-icon.android.png`，Packager就會根據平臺而選擇不一樣的文件。

自動匹配精度

如項目文件結構和代碼以下

├── index.js
└── img
    ├── my-icon@2x.png
    └── my-icon@3x.png    
     
<Image source={require('./assets/imgs/check.png')} />

Packager會打包全部的圖片而且依據屏幕精度提供對應的資源。

note:

• 如未定義樣式則默認按原尺寸加載。
• 只有實際被用到（即被require）的圖片纔會被打包到你的app。
• 在開發期間，增長和修改圖片不須要從新編譯了，只需像修改了js代碼同樣從新加載。
• 爲了使新的圖片資源機制正常工做，require中的圖片名字必須是一個靜態字符串，不能使用變量

使用混合App的圖片資源

若是你在編寫一個混合App（一部分UI使用React Native，而另外一部分使用平臺原生代碼），也可使用已經打包到App中的圖片資源。
注意此時只使用文件名，不帶路徑也不帶後綴：

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

對於放置在Android的assets目錄中的圖片，還可使用asset:/ 前綴來引用：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

網絡圖片

網絡圖片須要手動指定圖片的尺寸，不然沒法顯示。
最好使用https，不然須要手動配置。

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

• 能夠在Image組件的source屬性中指定一些請求參數

base64

有時候你可能拿到的是圖片的 base64 數據，此時可使用'data:'格式來顯示圖片。須要手動指定圖片的尺寸。

系統相冊獲取

可從相冊獲取圖片資源展現。

note

• iOS提供緩存控制
• 除了讀取本地靜態圖片，其餘方式打開圖片都須要指定尺寸。
• require不存在的資源時，會報錯。經過uri獲取圖片不存在時，不報錯，且會根據style的設定佔位。