新增 `react-native-image-zoom-viewer` 实现图片放大功能，以及封装组件

README.md

@@ -17,3 +17,4 @@
 - 基于 `react-native-scrollable-tab-view` 实现主页面 `Tab` 选项卡切换
 - 基于 `react-native-scrollable-tab-view` 实现主页面 `Tab` 选项卡切换
 - 基于 `react-native-splash-screen` 实现 `APP` 启动页布局
 - 基于 `react-native-splash-screen` 实现 `APP` 启动页布局
 - 基于 `react-native-camera` 实现扫描条形码功能
 - 基于 `react-native-camera` 实现扫描条形码功能
+- 基于 `react-native-image-zoom-viewer` 实现图片放大功能

app/containers/common/ZoomPictureModel.js

+import React, { Component } from 'react';
+import {
+    View,
+    StyleSheet,
+    Modal,
+    ActivityIndicator
+} from 'react-native';
+import {
+    Width,
+    Height
+} from '../../base/BaseStyle';
+import ImageViewer from 'react-native-image-zoom-viewer';
+
+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
+
+        console.log('==currShowImgIndex======',isShowImage,  zoomImages, currShowImgIndex)
+
+        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={require('../../images/close_err_icon.png')} 不能加载本地图片
+                        // failImageSource={{ 
+                        //     url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg',
+                        //     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;
\ No newline at end of file

package.json

@@ -14,6 +14,7 @@
     "react-native-date-picker": "2.7.9",
     "react-native-date-picker": "2.7.9",
     "react-native-gesture-handler": "1.3.0",
     "react-native-gesture-handler": "1.3.0",
     "react-native-image-picker": "0.27.0",
     "react-native-image-picker": "0.27.0",
+    "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-root-toast": "3.1.1",
     "react-native-root-toast": "3.1.1",
     "react-native-scrollable-tab-view": "^0.9.0",
     "react-native-scrollable-tab-view": "^0.9.0",
     "react-native-sound": "0.11.0",
     "react-native-sound": "0.11.0",
@@ -29,6 +30,7 @@
     "@babel/runtime": "^7.4.5",
     "@babel/runtime": "^7.4.5",
     "babel-jest": "^24.8.0",
     "babel-jest": "^24.8.0",
     "jest": "^24.8.0",
     "jest": "^24.8.0",
+    "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.54.1",
     "metro-react-native-babel-preset": "^0.54.1",
     "react-test-renderer": "16.8.3"
     "react-test-renderer": "16.8.3"
   },
   },