首先来说说背景，写这个控件主要是因为我们的应用好多都是电视上的应用，需要很多焦点事件，但是原生的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'}}
/>

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,heightmarginTop5}}
    sourceuri:'http://f.hiphotos.baidu.com/baike/pic/item/08f790529822720e910b489078cb0a46f31fab97.jpg'scale{2.0} //获取焦点有个默认放大动画，这里设置放大的倍数
    cornersRadius65.0}//设置圆角borderColor{'red'//边框的颜色,也可以直接输入颜色值，eg：'#666666'
    borderWidth10//边框的宽度circletrue//是否是圆形图，设置了此属性就没必要设置圆角了autoPlay//gif图是否自动播放，只有gif图的时候才设置改属性scaleType'fit_center'//太多了，下面说明focusAnimfalse//默认为true，为true时图片在获得焦点时会放大onFocus{(hasFocus)=>//图片的焦点事件        ToastAndroid.show("焦点"+SHORT);
    }}
onClickevent//图片的点击事件点击/>