尊重版权,转载请注明出处
本文来自:江清清的技术专栏-翻译组(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() {
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 |
实例演示
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>
|