React Native控件之Image组件讲解

React Native控件之Image组件讲解与美团效果实例

（一）前言

今天我们来讲解一下Image组件，这个组件是非常常用的组件,在每个应用通常都会用到这个组件，所以详细讲解一下。讲解的内容主要有以下几点：
1. Image的基本用法
2. Image属性&方法
3. Image实例-仿照美团首页顶部分类

（二）Image基本用法

• 加载项目资源图片
• 加载打包过后APK中图片
• 加载网络图片

2.1加载项目资源图片

从0.14版本开始React Native支持加载项目目录中的图片资源，现在在测试项目中创建一个images目录，在里面加入apple_logo.png图片，那么可以通过以下代码进行加载：

   <View style={{marginTop:20, marginLeft:10, marginRight:10,backgroundColor:'gray'}}>
             <Text style={{fontSize:20}}>测试加载项目图片！Text>
             <Image source={require('./images/apple_logo.png')}  style={{width:200, height:200}}/>
         View>

运行效果如下：

这个图片资源文件的查找和JS模块查找相似，使用require(‘……..’)，这个方法根据填写的图片路劲相对当前JS文件路劲进行搜索。

RN非常人性化的是Packager会根据平台选择相应的文件，例如apple_logo.ios.png和apple_logo.android.png两个文件，会根据Android和iOS平台选择相应的文件。

对于iOS开发者来说，肯定会知道经常可以设置@2x，@3x等格式的图片来适配手机屏幕，例如[email protected]和[email protected]，这样Packager进行打包的时候会根据屏幕密度进行选择显示对应的图片。如果没有恰好的满足当前屏幕分辨率的，Packager会选择最接近的图片资源。
【注意】在使用Image组件时，require方法中图片路径必须是静态字符信息，不能在require()中进行拼接。例如：

source={require('./images/'+'apple_logo.png')}>

这样运行之后就会报错了。

2.2加载混合App的资源

目前，原生APP需求还是比较多的，不过现在使用了React Native之后，我们可以进行混合App开发（一些UI是React Native代码，一些UI是原生代码），现在仍然可以利用已经打包到App里面的图片。如果现在我们有这种需求：软件已经打包生成安装包，在iOS项目中Images.xcassets和Android项目中的drawable文件夹中已经被打包了相应的资源。而且，项目中已经集成了React Native框架，现在我们需要的功能需求是“使用热更新方式更新JS代码，这段代码的功能是使用Image组件加载上诉文件夹中的已经打包到安装包中的图片资源。”

直接上代码：

<Image source={{uri:'apple_logo'} style={{width:40,height:40}}/>

【注意1】这种方法提供非安全的检查，取决于你去 确保那些图片是可以访问得到。而且，你不得不手动指定图片尺寸。
【注意2】Android项目要显示效果，我们要做如下修改，在res文件夹下面创建一个drawable文件夹，然后放入图片文件，重新打包项目运行即可。原因为何？因为Android项目采用gradle，现在不会默认生成drawable文件夹，所以现在要放入图片，需要手动创建图片文件夹。在这个例子中我们是吧apple_logo.png图片放入到res/drawable文件夹中。然后需要在Android studio中打开打包项目并运行，注意这一点，这一步是非常关键。
【注意3】在iOS平台的项目，我们需要特别注意的是:写完上诉JS脚本之后，并不代表就可以加载打包App中的图片，需要在Xcode中打包项目并运行，这样在JS代码中才能访问得到打包App中的图片。
【注意4】不管是Android还是iOS项目，我们要访问打包App中的资源，设备或者模拟器的软件都是经过Apk或者apk安装的。否则是访问不到图片资源。

我的例子：

<View>
<View style={styles.imageContainer}>
                   <Text style={styles.textStyle}>测试加载项目图片！Text>
                   <Image source={require('./images/apple_logo.png')}  style={styles.imageStyle}/>
               View>

               <View style={styles.imageContainer}>
                   <Text style={styles.textStyle}>测试加载打包项目中图片！Text>
                   <Image source={{uri:'xixi'}}  style={styles.imageStyle}/>
               View>
<View/>

var styles = StyleSheet.create({
  toggleWeightText: {
    backgroundColor: '#ffaaaa',
    marginTop: 5,
  },
  changeSizeText: {
    backgroundColor: '#aaaaff',
    marginTop: 5,
  },
  imageContainer: {
    marginTop:20,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'gray',
    alignItems:'center'
  },
  imageStyle: {
    width:100,
    height:100,

  },
  textStyle: {
    fontSize: 20,
  }
});

运行效果如下：

【注意5】‘xixi’ 适用于调试版本，如果采用发布版本，就需要使用‘xixi.png’格式的访问方式了。

2.3加载网络图片

在实际开发过程中，很多情况是使用的是网络加载服务器上的图片，这样可以减少安装包的大小。在这种方式加载网络图片的时候一定要注意一点，我们需要指定图片尺寸大小，因为从网上下载下来的图片我们是不知道图片的大小的。

直接上代码：

<View style={styles.imageContainer}>
                   <Text style={styles.textStyle}>测试加载网络上的图片 Text>
                   <Image source={{uri:'http://localhost:8080/JSPatchDataProvider/apple_logo.png'}} style={styles.imageStyle} />
               View>


var styles = StyleSheet.create({
  toggleWeightText: {
    backgroundColor: '#ffaaaa',
    marginTop: 5,
  },
  changeSizeText: {
    backgroundColor: '#aaaaff',
    marginTop: 5,
  },
  imageContainer: {
    marginTop:20,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'gray',
    alignItems:'center'
  },
  imageStyle: {
    width:100,
    height:100,

  },
  textStyle: {
    fontSize: 20,
  }
});

以上代码的网址是我在本地搭建的本地服务器地址，如果需要测试，可以自行修改为其他图片的地址。

运行效果如下：

2.4 Image作为某些控件背景图片

如果要实现Image作为背景，那么我们就要使用嵌套组件。具体实现是让Image组件嵌套Text组件（其他组件），然后Image加载图片，代码如下：

<Image source={require('./images/apple_logo.png')} style={{width:150,height:150}}>
                  <Text style={{color:'green',fontSize:20,backgroundColor:'transparent'}}>我有一个背景图片！Text>
               Image>

效果如下图所示：

（三）Image属性方法

名称	描述	属性OR方法	适合平台
onLayout	当Image布局发生变化时会调用该方法，值格式为 {nativeEvent:{layout:{x,y,width,height}}}	方法	iOS与Android
onLoad	当图片加载成功之后，回调该方法	方法	iOS与Android
onLoadEnd	当加载完成回调该方法，不管图片加载成功还是失败都会调用该方法	方法	iOS与Android
onLoadStart	当开始加载图片调用该方法	方法	iOS与Android
resizeMode	enum(‘cover’,’contain’,’stretch’),当网络图片不匹配显示图片尺寸时，决定怎么去改变图片大小。cover：保持图片的外表比例均匀缩放图片，这种方式图片尺寸将等于或大于原本相符合的View的尺寸；contain：保持图片的外表比例均匀缩放图片，这种方式图片尺寸将等于或小于原本相符合的View的尺寸；stretch：独立缩放宽高，这个可能改变源图片外表比例	属性	iOS与Android
source	值为{uri:string},uri是表示图片资源文件的标示符，它可以是一个http地址、本地图片地址或者使用require(‘./path/image.png’)方法的静态图片资源	属性	iOS与Android

（四）Image组件Style样式

名称	value	平台
Flexbox特性	Flexbox学习汇总	Android与iOS
ShadowPropTypesIOS特性	ShadowPropTypesIOS	iOS适用，Android不适用
Transforms变换特性	Transfroms特性	iOS与Android
backfaceVisibility	enum(‘visible’, ‘hidden’)	iOS与Android
backgroundColor	颜色color	iOS与Android
borderBottomLeftRadius	number	iOS与Android
borderBottomRightRadius	number	iOS与Android
borderColor	颜色color	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
resizeMode	Object.keys(ImageResizeMode)	iOS与Android
tintColor	颜色color,改变所有非透明像素的颜色	iOS与Android
overlayColor	string类型，当图片组件有圆角，指定overlayColor将导致剩下的部分被纯净颜色填充。这个是非常有用的对于Android平台不能实现软件。利用该属性一个典型方式是显示图片背景色然后同时设置overlayColor为背景颜色。	适合于Android平台，不适合iOS平台

（五）Image特殊属性

在上面我们讲解了样式Style属性，现在我们来介绍一下Image一些特殊属性，为什么说特殊？因为官网没有特殊地把他们列出，而且大多数是支持iOS平台。

名称	功能描述	value	平台
testID	Image组件用于UI自动化脚本测试时唯一标示符	string	iOS、Android
accessiblilityLabel	当用户与Image组件交互时该文本被屏幕阅读器读取	string	iOS
accessible	当为true时，指示image组件是可访问组件	bool	iOS
blurRadius	添加一个模糊效果到图片上	number	iOS
capInsets	当图片改变大小时，四个角的尺寸将被保持一个确定大小通过指定capInsets，但是图片内容和边框将被拉伸，这是非常有用的对于创建一个可改变圆角大小的按钮、阴影和其他一些可改变大小的资源。更多信息请看Apple documentation	{top: number, left: number, bottom: number, right: number}	iOS
defaultSource	当加载图片过程中默认显示的静态图片	{uri:string}	iOS
onError	该属性要赋值一个function，当加载出错执行赋值的这个方法	{nativeEvent: {error}}	iOS
onProgress	该属性要复制一个function，当正在加载图片时执行赋值的这个方法	{nativeEvent: {loaded, total}}	iOS

（六）方法（Methods）

getSize(uri:string,success:(width:number,height:number)=>void,failure:(error:any)=>void)

当显示图片之前收到这个图片的宽度与高度。这个方法可能会失败如果图片无法找到或者无法下载。为了获得图片尺寸，图像可能需要首先被加载或者下载，在这之后将被缓存。这就意味着，在原则上可以使用此方法来预加载图像，然后它没有被充分利用到这个功能上。在将来为了获得图片尺寸，可能被实现用一种不用加载或者下载图像数据的方式。一个合适、支持的预加载图像的方法将被提供作为一个单独的API来提供。