调整放大图片组件的样式

(cherry picked from commit 8cb22ec3)

app/containers/common/listDataComponent/PictureZoom.js

 import React, { Component } from 'react';
 import React, { Component } from 'react';
-import { StyleSheet, Image, TouchableOpacity, View, Modal, ActivityIndicator } from 'react-native';
-import { Height, icon_style, pxSize, Width } from '../../../base/BaseStyle';
+import { StyleSheet, Image, TouchableOpacity, View, Modal, ActivityIndicator, Text } from 'react-native';
+import { font_family_medium, Height, icon_style, pxSize, second_text_size, Width } from '../../../base/BaseStyle';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import ImageViewer from 'react-native-image-zoom-viewer';
 const PropTypes = require('prop-types');
 const PropTypes = require('prop-types');
 
 
@@ -40,6 +40,24 @@ class PictureZoom extends Component {
         )
         )
     }
     }
 
 
+    // 页码指示器样式
+    renderPageIndicator(currentIndex, allSize) {
+        return (
+            <View style={styles.top_indic}>
+                <Text style={styles.top_indic_txt}>{currentIndex + " / " + allSize}</Text>
+            </View>
+        )
+    }
+
+    // 大图样式
+    handleRenderImage(props) {
+        return(
+            <View style={styles.zoom_pic_img_box}>
+                <Image {...props} style={[props.style, styles.zoom_pic_img]}/>
+            </View>
+        )
+    }
+
     render() { 
     render() { 
         let {listImageUrls, listImageIndex, listStyleImage, listPicType} = this.props
         let {listImageUrls, listImageIndex, listStyleImage, listPicType} = this.props
         let {picZoomIsShow, listPicTypeArr, picStyleArr} = this.state
         let {picZoomIsShow, listPicTypeArr, picStyleArr} = this.state
@@ -47,7 +65,6 @@ class PictureZoom extends Component {
         if(listPicTypeArr.indexOf(listPicType) > -1){
         if(listPicTypeArr.indexOf(listPicType) > -1){
             picOthStyle = picStyleArr[listPicTypeArr.indexOf(listPicType)]
             picOthStyle = picStyleArr[listPicTypeArr.indexOf(listPicType)]
         }
         }
-        console.log('picOthStyle---', picOthStyle)
         return (
         return (
             <View style={[styles.container]}>
             <View style={[styles.container]}>
                 <TouchableOpacity
                 <TouchableOpacity
@@ -64,8 +81,9 @@ class PictureZoom extends Component {
                     visible={picZoomIsShow}
                     visible={picZoomIsShow}
                     animationType={"slide"}
                     animationType={"slide"}
                     transparent={true}
                     transparent={true}
+                    style={styles.modal_box}
                     >
                     >
-                    <ImageViewer style={styles.zoom_pic_img}
+                    <ImageViewer
                         enableImageZoom={true}
                         enableImageZoom={true}
                         saveToLocalByLongPress={false}
                         saveToLocalByLongPress={false}
                         loadingRender={() => this.renderImageLoad()}
                         loadingRender={() => this.renderImageLoad()}
@@ -73,6 +91,9 @@ class PictureZoom extends Component {
                         imageUrls={listImageUrls}
                         imageUrls={listImageUrls}
                         index={listImageIndex}
                         index={listImageIndex}
                         onClick={() => this.handleShowZoomPic(false)}
                         onClick={() => this.handleShowZoomPic(false)}
+                        backgroundColor={'rgba(0,0,0,.6)'}
+                        renderImage = {(props) => this.handleRenderImage(props)}
+                        renderIndicator={(currentIndex, allSize, props) => this.renderPageIndicator(currentIndex, allSize, props)}
                         />
                         />
                 </Modal>
                 </Modal>
             </View>
             </View>
@@ -96,11 +117,27 @@ const styles = StyleSheet.create({
         width: '100%',
         width: '100%',
         height: pxSize(64),
         height: pxSize(64),
     },
     },
+    modal_box: {},
+    zoom_pic_img_box: {
+        alignItems: 'center'
+    },
     zoom_pic_img: {
     zoom_pic_img: {
-        maxWidth: Width()
+        width: '88%',
+        borderRadius: 6
     },
     },
     img_load: {
     img_load: {
         marginBottom: (Height() / 2) - 40
         marginBottom: (Height() / 2) - 40
+    },
+    top_indic: {
+        // backgroundColor: 'hsla(0, 0%, 100%, .2)',
+        position: 'absolute',
+        top: 50,
+        left: '46%'
+    },
+    top_indic_txt: {
+        fontSize: second_text_size,
+        color: 'white',
+        fontFamily: font_family_medium
     }
     }
 })
 })
  
  

app/containers/selfOrder/module/ProductRightStyle.js

@@ -405,9 +405,9 @@ class ProductRightStyle extends Component {
             image: require('../../../images/model_test.png')
             image: require('../../../images/model_test.png')
         }
         }
         let localTestImageUrls = [{
         let localTestImageUrls = [{
-            url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg',
+            url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg'
         },{
         },{
-            url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg',
+            url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg'
         },{
         },{
             url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg'
             url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg'
         }]
         }]