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

[译]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.路径切换到项目根目录,运行如下命令进行安装组件,点击进入实例代码

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

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

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)

dependencies {
    compile project( ':react-native-image-zoom' )
}

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

import com.image.zoom.ReactImageZoom; // add this import

public class MainActivity extends ReactActivity {
    //...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactImageZoom() // add this manager
      );
    }

属性介绍

属性	类型	默认值	介绍
souce	Object	null	same as the react image format source={{uri:'http...'}} or source={require('./...')}
tintColor	string	null	optional tintColor
scale	float	null	optional scale amount
scaleType	string	null	one of center, centerCrop, centerInside, fitCenter, fitStart, fitEnd, fitXY, matrix
onTap	function	null	optional on tap listener
onLoad	function	null	optional on load listener

实例演示

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>