Image组件是用来加载图片的。React Native项目加载图片往往有三种方式：
- 从React Native项目中加载图片；
- 从APP项目中加载图片；
- 从网络中加载图片。
Image组件加载图片
加载项目图片资源
所谓加载React Native项目中的图片资源，指的是加载React Native项目中除了android、ios、node_module文件夹之外的其他文件夹中的图片资源。
require 方法。实例代码如：
<Image source={require('./images/apple_logo.png')}/>
logo.android.png 和 logo.ios.png【注意】React Native使用 require 方法加载项目图片资源的方法暂时不支持字符串拼接，即： <Image source={require('./images/' + 'apple_logo.png')}>
./ 表示当前目录， ./../
加载APP图片资源
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
加载网络图片资源
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
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 |
