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 |