首先，总结一下React-native的Image组件的使用方法.
Image组件的引入图片提供了下面这几种类型：静态图片资源，网络图片资源
静态图片资源
<Image source={require('./my-icon.png')} />
网络图片资源
<Image
style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
注意事项
上面说了那么多概念似的说明，但是，实践过程中总会有一些坎坷。下面就是一些注意事项了。
背景图片的实现
写过前端页面的朋友应该都知道html中不光可以使用image标签来展示图片，还有可以使用背景图片（background-image）的形式来展现。要实现这样的功能只需要新增一个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}/>
-
加载网络资源时，加载的图片不显示。
Ios9以后默认只能https传输，所以我们需要调整工程目录下的projectName/Info.plist文件
项目目录信息添加Allow Arbitrary Loads的key值，value为 YES
需要修改的字段
完工。
-
使用require使用静态图片资源报错
因为懒，使用了微信截图的默认名称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动画支持添加本行语句
}
