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

发布时间：2020-12-15 06:44:55 所属栏目：百科来源：网络整理

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

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

注意如果需要加载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,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//图片的点击事件点击/>

说明一下scaleType的属性

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

fitCenter fitEnd

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!