react-native实现大图预览(支持手势缩放)

说起移动端的app，一定会有照片的添加，展示和上传。其中大图预览是必不可少的，有的app只是简单的放大功能，有的app则需要支持更复杂的操作，例如手势缩放等。http://www.jianshu.com/p/59168a06bbd0
今天来介绍一个图片缩放的三方库react-native-image-zoom-viewer，它支持ios和android平台，很不错！废话少说，直接来介绍怎么使用。

一、新建项目

首先打开终端，在相应的目录下输入命令创建新项目

react-native init ImageViewerDemo

项目创建完成，进入项目根目录下输入命令下载react-native-image-zoom-viewer库

npm i react-native-image-zoom-viewer --save

二、相关属性

相关属性.png

三、直接使用

新建imageShow.js

/**
 * Created by sybil052 on 2017/7/6.
 * 照片大图预览
 */
import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import stylesCommon from '../../../assets/css/common';
import aaa from '../../../assets/img/nodata.png';

class ImageShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            images: [],
            imageIndex: 1,
        };
    }
    componentWillMount() {
        // 上个界面传来的照片集合
        const params = this.props.router.getCurrentRoute().params;
        const images = params.image;
        const pageNum = params.num;
        this.setState({
            images: images,
            imageIndex: pageNum,
        });
    }

    render() {
        return (
            <View style={stylesCommon.container}>
                <ImageViewer
                    imageUrls={this.state.images} // 照片路径
                    enableImageZoom={true} // 是否开启手势缩放
                    index={this.state.imageIndex} // 初始显示第几张
                    failImageSource={aaa} // 加载失败图片
                    onChange={(index) => {}} // 图片切换时触发
                    onClick={() => { // 图片单击事件
                        this.props.navigator.pop();
                    }}
                />
            </View>
        );
    }
}
export default ImageShow;

四、效果图

(一)ios效果图

QQ20170711-112236.gif

(二)android效果图

QQ20170711-133417.png

jiangjiang~大功告成啦~