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项目中的静态图片

加载方式为：

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')

加载原生图片

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 (                          );  }}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中的为准。

加载网络图片

加载网络图片也是通过uri的方式来加载的

{uri:'图片url'}

同上，此种方式也是需要指定图片的大小(widht和height)的

Image常用属性

source：标记图片的引用，填写图片路径或者url
+ 大方

reseizeMode：设置图片的填充模式，有三个可选值（默认值时cover）

cover：等比例缩放图片，超出部分不显示，使图片最短边占满组件
contain：等比例缩放图片，图片显示完全，即缩放到最长边占满组件
stretch：图片拉伸适应组件大小，图片有可能会发生变形

我们来看看三种模式的显示效果：

image

Image样式属性

borderColor:设置边框颜色
borderWidth:设置边框宽度
borderRadius:设置边框圆角
opacity:设置透明度（0～1之间，0表示透明，1表示不透明）
tintColor：着色，为所有非透明的像素指定一个颜色
backgroundColor：背景色（图片有透明背景时，可能会用到）