React Native基础之Image
Image组件
在React Native中，Image组件是用来加载图片的组件，如果学习过android的话，应该知道Image组件的作用就相当于android中的ImageView控件，用于显示图片。
Image加载图片等几种方式
作为RN中加载图片的组件，不同于android中的ImageView，android中的ImageView仅用来加载android项目中的drawable和mipmap目录下的图片资源。
RN项目本就是缩小了android与ios的差别，囊括了原生的android项目和ios项目，自然也就包含了原生项目中的图片资源目录，再加上RN项目中需要公共资源目录，因此，在React Native中，Image加载图片的方式出现了好几种，如下：
- 加载RN项目中静态图片
- 加载原生图片(android:drawable/mipmap ios:Images.xcassets目录下)
- 加载网络图片
加载RN项目中的静态图片
<Image source={require('../img/icon_logo.png')} style={{marginTop:20}}/>
加载方式为：
require('图片存放路径')
此种方式用于加载RN项目中的静态图片（require中放的是RN项目中的图片路径）
使用此方式加载静态图片时，图片的位置(在RN项目中，不能在android、ios、node-modules目录下)使用这一种加载图片的方式
注意：
- require函数中填写图片路径时，需要加上图片的后缀名，如上：'.png'
- require函数中暂时不支持字符串拼接，如：require('../img/'+'icon_log.png''),如此会报异常
- require路径的前面常有：'../'、'./'这样的，'./'表示当前目录，'../'表示当前目录的上级（父）目录
- RN还有一个优势，RN中可以通过图片的命名方式来实现对应平台图片的加载，命名方式为：'图片名'+'.平台名'+'.后缀名',如：图片icon_logo.android.png和icon_logo.ios.png,RN会根据中间的平台名来加载对应平台的图片
- RN实现图片适配的方式：
- 图片命名为icon_logo@2x.png、icon_logo@3x.png的形式，RN会根据屏幕分辨率来加载对应尺寸的图片，如果没有恰好满足屏幕分辨率的，则选择最接近的
- 该种适配方式，对与android来说，引入的时候不能将'@2x'这样的字样引入进来，如require('./img/icon_logo@2x.png')，会导致图片无法识别，正确的加载方式为require('./img/icon_logo.png')
加载原生图片
<Image source={{uri:'icon_app'}} style = {styles.icon}></Image>
const styles = StyleSheet.create({
container:{
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
},
icon:{
width:120,
height:120,
},
text:{
color:'black',
fontSize:16,
marginTop:20
}
})
所谓原生图片，android中指的是app/src/main/res/drawable目录下，ios中指的是Images.xcassets目录，或者说是打包后的apk后反编译出来的图片资源
从以上代码可以看到，我们可以看到，加载方式为：
{uri:'图片名称'}
这里的图片名称不带图片的后缀名，并且没有路径，只有一个图片名称
注意：
- 根据上面的代码，可以看到，需要指定图片的大小(width和height),不然图片无法显示，因为此加载方式不提供图片安全检查
- 不同于上面的加载方式，使用uri的加载方式可以实现字符串拼接，解决了上面require中不能拼接的问题，因此，如果需要使用拼接来实现加载，那么只需要将图片放入原生项目对应的目录下
还有一点需要注意，就是上面的加载方式在android中默认加载的drawable目录下的图片资源，如果想加载mipmap下的图片资源，加载方式如下：
var nativeImageSource = require('nativeImageSource');
class RN_Image extends Component {
render() {
let ades = {
android: 'mipmap/ic_launcher',
width: 72,
height: 72
};
return (
<View style={styles.container}>
<Image style={styles.image} source={nativeImageSource(ades)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'gray'
},
image: {
backgroundColor: 'white',
width: 120,
height: 120,
},
});
module.exports = RN_Image
nativeImageSource中可以指定图片的宽高，如果在image的style中同时指定了图片宽高的话，以style中的为准。
加载网络图片
<Image
source = {{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}}
style={styles.icon}
resizeMode = 'cover'></Image>
加载网络图片也是通过uri的方式来加载的
{uri:'图片url'}
同上，此种方式也是需要指定图片的大小(widht和height)的
Image常用属性
source：标记图片的引用，填写图片路径或者url
+ 大方
reseizeMode：设置图片的填充模式，有三个可选值（默认值时cover）
- cover：等比例缩放图片，超出部分不显示，使图片最短边占满组件
- contain：等比例缩放图片，图片显示完全，即缩放到最长边占满组件
- stretch：图片拉伸适应组件大小，图片有可能会发生变形
我们来看看三种模式的显示效果：
Image样式属性
- borderColor:设置边框颜色
- borderWidth:设置边框宽度
- borderRadius:设置边框圆角
- opacity:设置透明度（0～1之间，0表示透明，1表示不透明）
- tintColor：着色，为所有非透明的像素指定一个颜色
- backgroundColor：背景色（图片有透明背景时，可能会用到）
