React Native基礎(chǔ)之Image
Image組件
? ? ? ?在React Native中晤碘，Image組件是用來加載圖片的組件携冤，如果學(xué)習(xí)過android的話盒刚，應(yīng)該知道Image組件的作用就相當(dāng)于android中的ImageView控件细诸，用于顯示圖片惕它。
Image加載圖片等幾種方式
? ? ? ?作為RN中加載圖片的組件怕午，不同于android中的ImageView，android中的ImageView僅用來加載android項(xiàng)目中的drawable和mipmap目錄下的圖片資源淹魄。
? ? ? ?RN項(xiàng)目本就是縮小了android與ios的差別诗轻，囊括了原生的android項(xiàng)目和ios項(xiàng)目，自然也就包含了原生項(xiàng)目中的圖片資源目錄揭北，再加上RN項(xiàng)目中需要公共資源目錄扳炬，因此，在React Native中搔体，Image加載圖片的方式出現(xiàn)了好幾種恨樟，如下：
- 加載RN項(xiàng)目中靜態(tài)圖片
- 加載原生圖片(android:drawable/mipmap ios:Images.xcassets目錄下)
- 加載網(wǎng)絡(luò)圖片
加載RN項(xiàng)目中的靜態(tài)圖片
<Image source={require('../img/icon_logo.png')} style={{marginTop:20}}/>
? ? ?
?加載方式為：
require('圖片存放路徑')
? ? ? ?此種方式用于加載RN項(xiàng)目中的靜態(tài)圖片（require中放的是RN項(xiàng)目中的圖片路徑）
? ? ? ?使用此方式加載靜態(tài)圖片時(shí)，圖片的位置(在RN項(xiàng)目中疚俱，不能在android劝术、ios、node-modules目錄下)使用這一種加載圖片的方式
? ? ?
?注意：
- require函數(shù)中填寫圖片路徑時(shí)，需要加上圖片的后綴名养晋，如上：'.png'
- require函數(shù)中暫時(shí)不支持字符串拼接衬吆，如：require('../img/'+'icon_log.png''),如此會(huì)報(bào)異常
- require路徑的前面常有：'../'、'./'這樣的绳泉，'./'表示當(dāng)前目錄逊抡，'../'表示當(dāng)前目錄的上級(jí)（父）目錄
- RN還有一個(gè)優(yōu)勢(shì)，RN中可以通過圖片的命名方式來實(shí)現(xiàn)對(duì)應(yīng)平臺(tái)圖片的加載零酪，命名方式為：'圖片名'+'.平臺(tái)名'+'.后綴名',如：圖片icon_logo.android.png和icon_logo.ios.png,RN會(huì)根據(jù)中間的平臺(tái)名來加載對(duì)應(yīng)平臺(tái)的圖片
- RN實(shí)現(xiàn)圖片適配的方式：
- 圖片命名為icon_logo@2x.png冒嫡、icon_logo@3x.png的形式，RN會(huì)根據(jù)屏幕分辨率來加載對(duì)應(yīng)尺寸的圖片四苇，如果沒有恰好滿足屏幕分辨率的孝凌，則選擇最接近的
- 該種適配方式，對(duì)與android來說月腋，引入的時(shí)候不能將'@2x'這樣的字樣引入進(jìn)來蟀架，如require('./img/icon_logo@2x.png')，會(huì)導(dǎo)致圖片無法識(shí)別榆骚，正確的加載方式為require('./img/icon_logo.png')
加載原生圖片
<Image source={{uri:'icon_app'}} style = {styles.icon}></Image>
const styles = StyleSheet.create({
container:{
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
},
icon:{
width:120,
height:120,
},
text:{
color:'black',
fontSize:16,
marginTop:20
}
})
? ? ?
?所謂原生圖片片拍，android中指的是app/src/main/res/drawable目錄下，ios中指的是Images.xcassets目錄寨躁，或者說是打包后的apk后反編譯出來的圖片資源
? ? ?
?從以上代碼可以看到，我們可以看到牙勘，加載方式為：
{uri:'圖片名稱'}
這里的圖片名稱不帶圖片的后綴名职恳，并且沒有路徑，只有一個(gè)圖片名稱
注意：
- 根據(jù)上面的代碼方面，可以看到放钦，需要指定圖片的大小(width和height),不然圖片無法顯示，因?yàn)榇思虞d方式不提供圖片安全檢查
- 不同于上面的加載方式恭金，使用uri的加載方式可以實(shí)現(xiàn)字符串拼接操禀，解決了上面require中不能拼接的問題，因此横腿，如果需要使用拼接來實(shí)現(xiàn)加載颓屑，那么只需要將圖片放入原生項(xiàng)目對(duì)應(yīng)的目錄下
還有一點(diǎn)需要注意，就是上面的加載方式在android中默認(rèn)加載的drawable目錄下的圖片資源耿焊，如果想加載mipmap下的圖片資源揪惦，加載方式如下：
var nativeImageSource = require('nativeImageSource');
class RN_Image extends Component {
render() {
let ades = {
android: 'mipmap/ic_launcher',
width: 72,
height: 72
};
return (
<View style={styles.container}>
<Image style={styles.image} source={nativeImageSource(ades)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'gray'
},
image: {
backgroundColor: 'white',
width: 120,
height: 120,
},
});
module.exports = RN_Image
nativeImageSource中可以指定圖片的寬高，如果在image的style中同時(shí)指定了圖片寬高的話罗侯，以style中的為準(zhǔn)器腋。
加載網(wǎng)絡(luò)圖片
<Image
source = {{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}}
style={styles.icon}
resizeMode = 'cover'></Image>
? ? ?
?加載網(wǎng)絡(luò)圖片也是通過uri的方式來加載的
{uri:'圖片url'}
同上，此種方式也是需要指定圖片的大小(widht和height)的
Image常用屬性
source：標(biāo)記圖片的引用，填寫圖片路徑或者url
+ 大方
reseizeMode：設(shè)置圖片的填充模式纫塌，有三個(gè)可選值（默認(rèn)值時(shí)cover）
- cover：等比例縮放圖片诊县，超出部分不顯示，使圖片最短邊占滿組件
- contain：等比例縮放圖片措左，圖片顯示完全依痊，即縮放到最長(zhǎng)邊占滿組件
- stretch：圖片拉伸適應(yīng)組件大小，圖片有可能會(huì)發(fā)生變形
我們來看看三種模式的顯示效果：
Image樣式屬性
- borderColor:設(shè)置邊框顏色
- borderWidth:設(shè)置邊框?qū)挾?/li>
- borderRadius:設(shè)置邊框圓角
- opacity:設(shè)置透明度（0～1之間媳荒，0表示透明抗悍，1表示不透明）
- tintColor：著色，為所有非透明的像素指定一個(gè)顏色
- backgroundColor：背景色（圖片有透明背景時(shí)钳枕，可能會(huì)用到）
