React Native可以通過Image組件顯示圖片尖殃。既可以加載網(wǎng)絡(luò)圖片,也可以加載本地資源圖片弛秋。接下來，我們介紹React Native加載圖片的幾種方式：
1. 網(wǎng)絡(luò)圖片加載
加載網(wǎng)絡(luò)圖片非常簡單， 直接上代碼：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image //導(dǎo)入對應(yīng)的API組件
} from 'react-native';
var imageUrl = 'http://ojm0517sf.bkt.clouddn.com/2.jpg';
export default class TestHello extends Component {
render() {
return (
<View style={styles.container}>
<Image style={{width:80,height:80}}
source={{uri:imageUrl}}/>
</View>
);
}
}
由此可以看出钓猬，需要指定source標(biāo)簽，uri是對應(yīng)的網(wǎng)絡(luò)圖片的地址。
2. 加載手機(jī)文件系統(tǒng)的圖片資源:
使用uri的方式,指定目錄
// Android的方式
<Image style={{width:80,height:80}}
source={{uri:'file:///sdcard//Download/gdb.png'}}/>
// IOS由于存在沙盒機(jī)制，需要先獲取沙盒目錄示绊，請自行嘗試
3.加載原生圖片:
原生圖片資源: ios項(xiàng)目或者android項(xiàng)目下面的圖片資源锭部。
方式：將添加到對應(yīng)的圖片資源管理文件中.eg:ios 放到images.xacssets下 android放到drawable下
Android項(xiàng)目中,ReactNative只能加載顯示drawable下的圖片，而mipmap圖片是無法加載的.
<Image
style={{width:80,height:80}}
source={{uri:'icon'}}/>
4.加載本地圖片:
使用本地圖片資源時(shí),可以不指定圖片尺寸.默認(rèn)情況下,會以圖片的尺寸,進(jìn)行顯示.
<Image
source={require('./shell.png')}/>
require可以理解成: 使用了一個聲明,進(jìn)行預(yù)加載,等同于在代碼中預(yù)先加載了圖片資源.
但是以下紅色方框中的方式會出錯:
在RN開發(fā)中, 不允許使用字符串變量來指定需要預(yù)先加載的圖片的名稱.
因?yàn)镽eact Native在編譯代碼時(shí)處理所有的require聲明,而不是在運(yùn)行時(shí)動態(tài)的處理,而var在運(yùn)行時(shí)賦值,所以不能動態(tài)加載圖片資源. 就會報(bào)上面的錯誤.
注意: 路徑處理
require 中的圖片名字必須是一個靜態(tài)字符串面褐。如果需要業(yè)務(wù)邏輯動態(tài)獲取拌禾，應(yīng)將條件判斷的語句放到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} />
當(dāng)項(xiàng)目日漸龐大展哭，為了資源管理方便湃窍，我們想要有單獨(dú)的目錄來管理圖片，那么匪傍，我們需要了解圖片管理與目錄索引您市。
圖片管理與目錄索引
當(dāng)項(xiàng)目將圖片放置指定的目錄(非默認(rèn)目錄),進(jìn)行索引的方式
eg: 創(chuàng)造一個目錄結(jié)構(gòu)如下:
app：與android和ios同目錄
resource：存放項(xiàng)目中用到的各種資源（圖片，顏色役衡，通用樣式等）
imgs：存放圖片的文件夾
Images.js：圖片管理類
編輯Images.js: 聲明圖片的引用路徑
import React from 'react';
export default {
common: {
ic_launcher: require('./imgs/ic_launcher.png'),
button_moeny: require('./imgs/guide_button_image.png')
}
}
// common自定義的圖片標(biāo)簽,require()參數(shù)為對應(yīng)本地的圖片路徑
引用方式
<Image style={styles.imageStyle}
source={Images.common.ic_launcher}/>
// Images圖片管理類茵休，common自定義的圖片標(biāo)簽，ic_launcher圖片名稱
多分辨率屏幕的適配
在React Native項(xiàng)目中手蝎，如果需要適配不同分辨率的屏幕榕莺，則需要采用iOS上對圖片命名的方式，不同分辨率之間用@2x棵介、@3x來區(qū)分（如：image.png钉鸯，image@2x.png，image@3x.png）邮辽，在代碼中使用時(shí)唠雕，選擇image.png 這樣系統(tǒng)會自動根據(jù)屏幕分辨率，去選擇該分辨率所對應(yīng)的圖片吨述。請自行嘗試.
Image resizeMode 圖片拉伸方式
resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
resizeMode 決定當(dāng)組件尺寸和圖片尺寸不成比例的時(shí)候如何調(diào)整圖片的大小岩睁。
我們通過對一張網(wǎng)絡(luò)圖片設(shè)置不同的拉伸方式，觀察結(jié)果锐极。原圖效果：
（原圖片地址:http://ojm0517sf.bkt.clouddn.com/2.jpg）
style={{width:375,height:375}} //我們設(shè)置圖片寬高
'cover': 在保持圖片寬高比的前提下,縮放圖片笙僚，直到寬度和高度都>=容器視圖的尺寸（resizeMode的默認(rèn)屬性）。
效果:超出容器的部分不顯示灵再，就是說肋层，圖片可能顯示不全。
cover效果如下：
'contain':在保持圖片寬高比的前提下縮放圖片翎迁，直到寬度和高度都<=容器視圖的尺寸栋猖。
效果:圖片完全顯示,被包裹在容器中，容器中可能留有空白.
contain效果如下：
'stretch': 拉伸圖片且不維持寬高比汪榔，直到寬高都剛好填滿容器蒲拉。
效果:圖片被拉伸或失真.
stretch效果如下：
'repeat': 重復(fù)平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用雌团。
Android中使用會報(bào)錯.
'center': 居中不拉伸燃领，效果如下：
需要注意的是：用Image組件加載網(wǎng)絡(luò)圖片時(shí),或者在原生目錄下加載圖片時(shí),React Native都無法獲取圖片大小,無法完成渲染.所以必須在樣式中聲明圖片的寬和高,如果沒有聲明，則圖片將不會被展示在界面上锦援。
參考文檔
guthub上facebook關(guān)于Image的介紹
推薦閱讀
React Native 學(xué)習(xí)筆記
Reac Native布局詳細(xì)指南
React Native調(diào)試技巧與心得
React Native發(fā)布APP之簽名打包APK
React Native應(yīng)用部署猛蔽、熱更新-CodePush最新集成總結(jié)
