react native 实现图片放大功能 （react-native-image-zoom-viewer）

目录：

1. 安装中间件 react-native-image-zoom-viewer
2. 封装放大图片弹窗组件
3. 调用弹窗组件

具体步骤

1. 安装中间件 react-native-image-zoom-viewer，参考官网 和 官网

版本：

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-image-zoom-viewer": "^3.0.1",

安装方式：

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

2. 封装放大图片弹窗组件

1. 新建 ZoomPictureModel.js 文件：

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Modal,
    ActivityIndicator,
    Dimensions
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const { width, height } = Dimensions.get('window');
const Width = () => { return width };
const Height = () => { return height };

/** 放大图片弹窗组件 */
class ZoomPictureModel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowImage: this.props.isShowImage,
            loadingAnimating: true,
            zoomImages: this.props.zoomImages,
            currShowImgIndex: this.props.currShowImgIndex
        }
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.isShowImage != nextProps.isShowImage) {
            this.setState({
                isShowImage: nextProps.isShowImage
            })
        }
        if (this.state.zoomImages != nextProps.zoomImages) {
            this.setState({
                zoomImages: nextProps.zoomImages
            })
        }
        if (this.state.currShowImgIndex != nextProps.currShowImgIndex) {
            this.setState({
                currShowImgIndex: nextProps.currShowImgIndex
            })
        }
    }

    handleZoomPicture(flag) {
        this.setState({
            isShowImage: flag
        })
        this.props.callBack(flag)
    }

    // 保存图片  
    savePhoto() {
        // let index = this.props.curentImage;
        // let url = this.props.imaeDataUrl[index];
        // let promise = CameraRoll.saveToCameraRoll(url);
        // promise.then(function (result) {
        //    alert("已保存到系统相册")
        // }).catch(function (error) {
        //     alert('保存失败！\n' + error);
        // });
    }

    // 图片加载
    renderImageLoad() {
        let { loadingAnimating } = this.state
        return (
            <View style={styles.img_load}>
                <ActivityIndicator animating={loadingAnimating} size={"large"} />
            </View>
        )
    }

    render() {
        let { isShowImage, zoomImages, currShowImgIndex } = this.state
        return (
            <View style={styles.container}>
                <Modal
                    visible={isShowImage}
                    animationType={"slide"}
                    transparent={true}
                    >
                    <ImageViewer style={styles.zoom_pic_img}
                        enableImageZoom={true}
                        saveToLocalByLongPress={false}
                        // menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }}
                        // onSave={(url) => { this.savePhoto(url) }}
                        // failImageSource={{ 
                        //     url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', // 不能加载本地图片
                        //     width: Width(),
                        //     height: 300
                        // }}
                        loadingRender={() => this.renderImageLoad()}
                        enableSwipeDown={true}
                        imageUrls={zoomImages}
                        index={currShowImgIndex}
                        onClick={() => this.handleZoomPicture(false)}
                        />
                </Modal>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    zoom_pic_img: {
        maxWidth: Width()
    },
    img_load: {
        marginBottom: (Height() / 2) - 40
    }
})

export default ZoomPictureModel;

3、调用弹窗组件, 即可显示✌️

【`TestPage.js`】文件引用弹窗组件；

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    Animated,
    Easing,
    InteractionManager,
    TouchableOpacity,
    Image,
    SafeAreaView,
    Dimensions
} from 'react-native';
import ZoomPictureModel from '../ZoomPictureModel';

class TestPage extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isShowImage: false,     //  显示弹窗组件  
            currShowImgIndex: 0     //  当前打开图片的index   
        }
    }
    
    // 展示/隐藏 放大图片
    handleZoomPicture(flag, index) {
        this.setState({
            isShowImage: flag,
            currShowImgIndex: index || 0
        })
    }
    
    // 加载放大图片弹窗
    renderZoomPicture() {
        let { isShowImage, currShowImgIndex } = this.state
        // 测试
        let zoomImages = [{
            url: 'https://tse2-mm.cn.bing.net/th/id/OIP.yPEBi69raqV5QW3aTmEQsgHaFj?pid=Api&rs=1',
            props: {
                // headers: ...
            }
        },{
            url: 'https://img.locationscout.net/images/2017-01/alpe-di-siusi-italy_l.jpeg',
        },{
            url: 'https://tse2-mm.cn.bing.net/th/id/OIP.yPEBi69raqV5QW3aTmEQsgHaFj?pid=Api&rs=1'
        }]  
        
        
        return (
            <ZoomPictureModel
                isShowImage={isShowImage}
                currShowImgIndex={currShowImgIndex}
                zoomImages={zoomImages}
                callBack={(flag) => this.handleZoomPicture(flag)}
            ></ZoomPictureModel>
        )

    }

    render() { 
        return ( 
            <View style={styles.container}>
                <SafeAreaView style={styles.container}>
                    
                    { this.renderZoomPicture() }
                    
                </SafeAreaView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
})
 
export default TestPage;

写给自己的随笔，有问题欢迎指出