React Native一款Android端的开源图片加载控件

首先来说说背景，写这个控件主要是因为我们的应用好多都是电视上的应用，需要很多焦点事件，但是原生的React native控件没有焦点事件的监听，所以就出了这款控件。好，废话不多说，下面是使用方法：

1.yarn add react-native-ifimage

在工程的目录，使用yarn添加图片控件, 当然npm也行，这里推荐yarn(如果第一次失败了，那就再试一次，总能成功的)

2.react-native link react-native-ifimage

添加react-native-ifimage的关联（当然你也可以手动添加，如果你不嫌麻烦的话）

3.在js文件中引入import IFImage from 'react-native-ifimage';

4.好了现在就可以引用了

<IFImage
              style={{width:200, height:200, marginTop:5}}
              source={{uri:'http://f.hiphotos.baidu.com/baike/pic/item/08f790529822720e910b489078cb0a46f31fab97.jpg'}}
          />

注意如果需要加载gif图的话，需要在你项目的Android目录下的app下的build.gradle添加     

compile 'com.facebook.fresco:animated-gif:1.3.0'

       

dependencies {
    compile project(':react-native-ifimage')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    // 如果你需要支持GIF动图
    compile 'com.facebook.fresco:animated-gif:1.3.0'
}

下面来说一下IFImage提供的全部属性：

<IFImage
    style={{width: 200, height: 200, borderWidth: 10, borderColor: 'gray', borderRadius:10, margin:10}}//这里边设置正常属性，包括边框的样式
    focusStyle={{borderWidth: 10, borderColor: 'green', borderRadius:8}}//获得焦点时边框的样式
    selectedStyle={{borderWidth: 10, borderColor: 'yellow', borderRadius:6}}//选中时边框的样式
    source={{uri: this.props.uri}}
    scale={2.0} //获取焦点有个默认放大动画，这里设置放大的倍数
    interceptDirection={'up'}//要屏蔽的方向键
    circle={false}//是否是圆形图，设置了此属性就没必要设置圆角了
    autoPlay={true}//gif图是否自动播放，只有gif图的时候才设置改属性
    scaleType={'centerCrop'}//太多了，下面说明
    onKeyEvents={({comView, direction}) => {//接收遥控器的按键，direction分别是up, left, down, right

    }}
    focusAnim={true}//获得焦点时是否触发动画，默认是false
    onFocus={({comView，hasF}) => {//焦点改变时走改方法 hasF为true时为有焦点，为false时失去焦点

    }
    }
    onClick={({comView}) => {//点击时走该方法
        this.state.selectFlag = !this.state.selectFlag;//这里是我自己定义的state，一个bool值
        this._imageif.setSelectedBorder(this.state.selectFlag);
        //this._imageif.setFocusBorder(true);//设置控件显示成获得焦点时的边框
        //this._imageif.setChangeFocused(true);//给该控件焦点，或者让该控件失去焦点
    }}/>

说明一下scaleType的属性

center	居中，无缩放。
centerCrop	保持宽高比缩小或放大，使得两边都大于或等于显示边界，且宽或高契合显示边界。居中显示。

centerInside	缩放图片使两边都在显示边界内，居中显示。和 fitCenter 不同，不会对图片进行放大。 如果图尺寸大于显示边界，则保持长宽比缩小图片。
fitCenter	保持宽高比，缩小或者放大，使得图片完全显示在显示边界内，且宽或高契合显示边界。居中显示。
fitStart	同上。但不居中，和显示边界左上对齐。
fitEnd	同fitCenter， 但不居中，和显示边界右下对齐。
fitXY	不保存宽高比，填充满显示边界。

另附Demo下载地址：http://download.youkuaiyun.com/download/beyond181/10040749  (该Demo是依据IFImage1.3.1版本的，新的版本的更改未提供Demo，大家可以自行根据上文的代码更改)

1.3.3版本相比1.3.1版本更新如下：

(1) 1.3.1中的style不支持StyleSheet.create创建的style样式，因为这种方式的传递的实际是个ID值，在1.3.3中对StyleSheet.create创建的style提供了支持，通过ReactNativePropRegistry.getByID得到该样式。

(2) 对IFImage的所有数值，包括宽，高，边框宽，圆角改成了跟React Native一致的体验，因React Native用的是dp，在1.3.1中IFImage还用的是像素。

(3)去掉了cornersRadius属性，在每个style中增加了borderRadius属性，可以在style,focusStyle,selectedStyle分别设置圆角。

 (4)更改了scaleType的bug

现如今的版本1.4.1：

（1）对放回参数进行了修改，增加了当前view的返回，采用对象的形式返回数据。如上所示

（2）修复了一些bug

如有问题，欢迎交流。