React Native开源图片缩放处理组件

来源：互联网发布：javascript小游戏编辑：程序博客网时间：2024/05/22 00:10

[译]React Native开源图片缩放处理组件(react-native-image-zoom)

2016/04/05 | React Native组件资源,外文翻译 | Sky丶清| 暂无评论 | 1551 views

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目:https://github.com/jiangqqlmj/js-coach-cn

开源项目地址:https://github.com/Anthonyzou/react-native-image-zoom

项目介绍

该组件进行封装了Android平台PhotoView和Universal-image-loader组件，进行实现图像缩放等功能。不过只是适配Android平台

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.1.路径切换到项目根目录,运行如下命令进行安装组件,点击进入实例代码

?
1
npm install --save react-native-image-zoom

1.2.在android/setting.gradle文件中做如下修改

?
1
2
include :react-native-image-zoom'
project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')

[注意].如果你的项目还包含了其他依赖库，那么该文件中也包含了其他组件信息

1.3.在android/app/build.gradle文件做如下依赖设置(:react-native-image-zoom)

?
1
2
3
dependencies {
    compile project(':react-native-image-zoom')
}

1.4.在MainActivity.java中进行注册组件(ReactImageZoom)

?
1
2
3
4
5
6
7
8
9
10
11
12
import com.image.zoom.ReactImageZoom; // add this import
 
public class MainActivity extends ReactActivity {
    //...
 
    @Override
    protected List<ReactPackage> getPackages() {
      returnArrays.<ReactPackage>asList(
          newMainReactPackage(),
          newReactImageZoom() // add this manager
      );
    }

属性介绍

属性类型默认值介绍souceObjectnullsame as the react image format source={{uri:'http...'}} or source={require('./...')}tintColorstringnulloptional tintColorscalefloatnulloptional scale amountscaleTypestringnullone of center, centerCrop, centerInside, fitCenter, fitStart, fitEnd, fitXY, matrixonTapfunctionnulloptional on tap listeneronLoadfunctionnulloptional on load listener

实例演示

?
1
2
3
4
5
6
7
8
9
import Image from 'react-native-image-zoom'
 
<Image
  onTap={ ()=> {ToastAndroid.show('ON TAP',ToastAndroid.SHORT)}}
  onLoad={ ()=> {
    ToastAndroid.show('onLoad',ToastAndroid.SHORT)
  }}
  source={{uri:this.state.text}}>
</Image>

0 0