首先，總結一下React-native的Image組件的使用方法.
Image組件的引入圖片提供了下面這幾種類型：靜態(tài)圖片資源更卒，網(wǎng)絡圖片資源
靜態(tài)圖片資源
<Image source={require('./my-icon.png')} />
網(wǎng)絡圖片資源
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
注意事項
上面說了那么多概念似的說明，但是檐春，實踐過程中總會有一些坎坷宝恶。下面就是一些注意事項了。
背景圖片的實現(xiàn)
寫過前端頁面的朋友應該都知道html中不光可以使用image標簽來展示圖片贯吓，還有可以使用背景圖片（background-image）的形式來展現(xiàn)。要實現(xiàn)這樣的功能只需要新增一個Image組件蜀变，然后把需要背景圖的子組件嵌入其中即可悄谐。
render (){
return (
<Image source={'./background.png'} style={{width:200,height:20}}>
<Text>這個文本下面有背景哦</Text>
</Image>
)
}
圖片不顯示的幾種可能性
- 圖片沒有指定寬高
<Image source={require('./my-icon.png')} style={{width:20,height:20}}/>
const imageObj={
width:20,
height:20
}
<Image source={require('./my-icon.png')} style={imageObj}/>
-
加載網(wǎng)絡資源時，加載的圖片不顯示库北。
Ios9以后默認只能https傳輸爬舰，所以我們需要調整工程目錄下的projectName/Info.plist文件
項目目錄信息添加Allow Arbitrary Loads的key值们陆，value為 YES
需要修改的字段
完工。
-
使用require使用靜態(tài)圖片資源報錯
因為懶情屹，使用了微信截圖的默認名稱WX20180523-232003@2x.png結果報錯了坪仇，說圖片找不到
WX20180617-144007@2x.png
修改圖片名稱以后，就可以顯示正常垃你。
- 沒有使用支持的圖片格式
- React Native 默認支持 JPG椅文、PNG 格式。
- 在 iOS 平臺下惜颇，還支持 GIF皆刺、WebP 格式。
- 在 Android 平臺下凌摄，默認不支持 GIF羡蛾、WebP 格式∠强鳎可以通過修改 Android 工程設置讓其支持這兩種格式：打開項目目錄下的android/app/build.gradle痴怨，視情況添加相關代碼：
dependencies {
compile 'com.facebook.fresco:animated-gif:0.11.0' //需要GIF動畫支持添加本行語句
compile 'com.facebook.fresco:webpsupport:0.11.0' //需要WebP格式支持添加本行語句
compile 'com.facebook.fresco:animated-webp:0.11.0' //需要WebP動畫支持添加本行語句
}
