Commit f3475b24 by Denglingling

调整放大图片组件的样式

(cherry picked from commit 8cb22ec3)
parent 84a6418a
import React, { Component } from 'react'; import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity, View, Modal, ActivityIndicator } from 'react-native'; import { StyleSheet, Image, TouchableOpacity, View, Modal, ActivityIndicator, Text } from 'react-native';
import { Height, icon_style, pxSize, Width } from '../../../base/BaseStyle'; 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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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({ ...@@ -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
} }
}) })
......
...@@ -405,9 +405,9 @@ class ProductRightStyle extends Component { ...@@ -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'
}] }]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment