【RN - 基礎】之Image使用簡介

　　Image組件是用來加載圖片的。React Native項目加載圖片每每有三種方式：

• 從React Native項目中加載圖片；
• 從APP項目中加載圖片；
• 從網絡中加載圖片。

 

Image組件加載圖片

加載項目圖片資源

　　所謂加載React Native項目中的圖片資源，指的是加載React Native項目中除了android、ios、node_module文件夾以外的其餘文件夾中的圖片資源。

　　加載React Native項目中的資源圖片，可使用 require 方法。實例代碼如： <Image source={require('./images/apple_logo.png')}/> 。

　　React Native能夠根據平臺來選擇不一樣的圖片，例如，圖片文件夾下有 logo.android.png 和 logo.ios.png ，則RN會根據當前的設備是安卓機仍是蘋果機來動態的加載相應設備下的圖片。

　　【注意】React Native使用 require 方法加載項目圖片資源的方法暫時不支持字符串拼接，即： <Image source={require('./images/' + 'apple_logo.png')}> 這種形式會報以下圖所示的錯誤：

　　這裏補充一些關於路徑的問題： ./ 表示當前目錄， ./../ 表示當前目錄的上一級目錄，依此類推。

 

加載APP圖片資源

　　這裏的加載APP中的圖片資源，都是從打包後的APK文件中反編譯出來的圖片資源，對於Android項目，圖片必須存在於 app/src/main/res/drawable 文件夾內；對於iOS項目，圖片必須存在於 Images.xcassets 文件夾內。

　　上面說，不管Android仍是iOS，都是從打包後的APK文件中取圖片的，所以，咱們在將圖片放到Android或iOS的相應文件夾下後，須要先運行一遍項目，或者Build一下APK，這樣才能保證項目的APK文件中打包了剛剛放進去的圖片。

　　實例代碼如： <Image source={{uri: 'apple_logo'} style={{width:40, height:40}}/> 。

　　【注意1】這種方式獲取到的圖片不提供安全檢查，所以咱們須要本身指定圖片大小，不然圖片顯示不出來。

　　【注意2】使用這種方式獲取圖片，uri中不能指定圖片後綴，即只須要指定文件名便可。

　　【注意3】 uri 方式支持字符串拼接，所以能夠解決 require 方法不能拼接的問題，即解決方法是將圖片放入APK中。

 

加載網絡圖片資源

　　加載網絡圖片一樣用到了 uri 的方法，實例代碼如： <Image source={{uri:'http://.../apple_logo.png'}} style={{width:200, height:200}} /> 。

　　【注意】使用這種方法加載網絡圖片，一樣必須指定圖片的尺寸。

 

Image做爲其餘組件的背景圖片

　　Image能夠做爲其餘組件的背景圖片展現，其方法是將Image嵌套在這些組件的外層，實例代碼以下：

<Image source={{ uri: 'logo' }} style={{ width: 150, height: 150 }}>
    <Text style={{ color: 'green', fontSize: 20, backgroundColor: 'transparent' }}>我有一個背景圖片！</Text>
    <Text style={{ color: 'green', fontSize: 20, backgroundColor: 'transparent' }}>我有一個背景圖片！</Text>
</Image>

 

Image的屬性

 resizeMode ：當加載的圖片的尺寸與設置的寬高不匹配時，決定怎樣去加載圖片，有三個可選值：cover（等比例縮放，使圖片最短邊佔滿組件）、contain（等比例縮放，使圖片最長邊佔滿組件）、stretch（拉伸鋪滿，可能改變圖片外表比例）。

 source ：圖片的資源，上面已經介紹，這裏不加贅述。

 

Image的style

名稱	value	平臺
backfaceVisibility	enum(‘visible’, ‘hidden’)	iOS與Android
backgroundColor	顏色	iOS與Android
borderBottomLeftRadius	number	iOS與Android
borderBottomRightRadius	number	iOS與Android
borderColor	顏色	iOS與Android
borderRadius	number	iOS與Android
borderTopLeftRadius	number	iOS與Android
borderTopRightRadius	number	iOS與Android
borderWidth	number	iOS與Android
opacity	enum(‘visible’, ‘hidden’)	iOS與Android
overflow	enum(‘visible’, ‘hidden’)	iOS與Android
tintColor	顏色，改變全部非透明像素的顏色	iOS與Android
overlayColor	string類型，當圖片組件有圓角，指定overlayColor將致使剩下的部分被純淨顏色填充。這個是很是有用的對於Android平臺不能實現軟件。利用該屬性一個典型方式是顯示圖片背景色而後同時設置overlayColor爲背景顏色	Android
defaultSource	當加載圖片過程當中默認顯示的靜態圖片	iOS