mobile / YH_RNComponent · Commits

Go to a project

Authored by Zhu-Arthur
Commit 613767be66746cc1dd53c3f9cd4b1caf9a30ff7e 1 parent 08cdb67a

拼团列表快照兼容 review by 戴强

Inline Side-by-side
Showing 2 changed files with 358 additions and 0 deletions
'use strict';
import React from 'react';
import ReactNative , {Platform}from 'react-native';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
import { captureRef } from "react-native-view-shot";
const {
AppRegistry,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
Modal,
Text,
CameraRoll,
Alert,
ScrollView,
} = ReactNative;
export default class SnapshootShare extends React.Component {
constructor(props) {
super(props);
this.saveImage = this.saveImage.bind(this);
this.shareImage = this.shareImage.bind(this);
}
shareImage(shareType){
if (Platform.OS === 'ios') {
ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
}).catch(
(error) => {
Alert.alert('图片生成失败!')
});
} else {
captureRef(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
}).catch(
(error) => {
Alert.alert('图片生成失败!')
});
}
}
saveImage(){
if (Platform.OS === 'ios'){
ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
var promise = CameraRoll.saveToCameraRoll(uri);
promise.then(function(result) {
Alert.alert('保存成功!')
}).catch(function(error) {
Alert.alert('保存失败!')
});
}).catch(
(error) => {
Alert.alert('保存失败!')
});
} else {
captureRef(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
var promise = CameraRoll.saveToCameraRoll(uri);
promise.then(function(result) {
Alert.alert('保存成功!')
}).catch(function(error) {
Alert.alert('保存失败!')
});
}).catch(
(error) => {
Alert.alert('保存失败!')
});
}
}
render() {
let { shareCodeInfo, qrCode, unionType } = this.props;
shareCodeInfo = shareCodeInfo ? shareCodeInfo.toJS() : {};
let productIcon = shareCodeInfo.bigImage ? getSlicedUrl(shareCodeInfo.bigImage,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
return (
<Modal
visible={this.props.show}
animationType={'none'}
transparent={true}
onRequestClose={() => {
}}>
<View style={styles.modalContainer}>
<ScrollView
style={styles.scrollView}
vertical={true}
showsVerticalScrollIndicator={false}
>
<View style={styles.container} ref='container'>
<Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
<View style={styles.product}>
<YH_Image style={styles.productimage} url={productIcon}></YH_Image>
</View>
<View style={styles.bottom}>
<Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
<View style={styles.bottomDetail}>
<View style={styles.titleV}>
<Text style={styles.titleText}>{shareCodeInfo.title}</Text>
</View>
<Text style={styles.tipDetailText}>长按图片识别小程序参团</Text>
</View>
</View>
</View>
<View style={styles.spaceV}/>
</ScrollView>
<View style={styles.shareView}>
<View style={styles.buttons}>
<TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
this.shareImage && this.shareImage('WXSceneSession');
}}>
<Image source={unionType ? require('../images/unionShare_wx_icon.png') : require('../images/weixin.png')} style={styles.icon} />
<Text style={styles.text}>微信好友</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
this.shareImage && this.shareImage('WXSceneTimeline');
}}>
<Image source={unionType ? require('../images/unionShare_timeline_icon.png') : require('../images/share_timeline_icon.png')} style={styles.icon} />
<Text style={styles.text}>微信朋友圈</Text>
</TouchableOpacity>
</View>
<View style={styles.line}/>
<TouchableOpacity activeOpacity={0.5} style={styles.save} onPress={() => {
this.saveImage && this.saveImage();
}}>
<Text style={styles.savetext}>保存图片</Text>
</TouchableOpacity>
</View>
<TouchableOpacity activeOpacity={0.5} style={styles.cancelBtn} onPress={() => {
this.props.showSnapshootShare && this.props.showSnapshootShare(false);
}}>
<Image source={require('../images/imageShareClose.png')} style={styles.cancelBtnicon} resizeMode={'contain'}/>
</TouchableOpacity>
</View>
</Modal>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
modalContainer: {
flex: 1,
width: width,
height: height,
},
backContainer: {
flex: 1,
width: width,
height: height,
alignItems: 'center',
backgroundColor: 'white',
},
container: {
width,
height,
backgroundColor: 'white',
alignItems: 'center',
},
scrollView: {
backgroundColor: 'white',
},
spaceV: {
backgroundColor: 'white',
height: 150*DEVICE_WIDTH_RATIO,
width,
},
logo: {
height: 22*DEVICE_WIDTH_RATIO,
width: 112*DEVICE_WIDTH_RATIO,
marginTop: 37*DEVICE_WIDTH_RATIO,
},
productimage: {
height: 443*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
},
product: {
height: 443*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
marginTop: 24*DEVICE_WIDTH_RATIO,
},
productDetail: {
height: 80*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
backgroundColor: 'rgba(0,0,0,0.4)',
position: 'absolute',
bottom: 0,
},
productDetailTop: {
height: 20*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
marginTop: 14*DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
productDetailTopText: {
fontSize: 14,
color: '#FFFFFF',
},
productDetailBottom: {
height: 30*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
marginTop: 7*DEVICE_WIDTH_RATIO,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
priceIcon: {
height: 17,
width: 50,
},
price: {
fontSize: 24,
color: '#FFFFFF',
marginLeft: 15*DEVICE_WIDTH_RATIO,
fontWeight: 'bold',
},
price2: {
fontSize: 14,
lineHeight: 14,
color: '#B0B0B0',
alignItems: 'center',
marginLeft: 13*DEVICE_WIDTH_RATIO,
height: 14,
marginTop: 2,
},
mianyouIcon: {
position: 'absolute',
top: 262*DEVICE_WIDTH_RATIO,
right: 28*DEVICE_WIDTH_RATIO,
height: 63*DEVICE_WIDTH_RATIO,
width: 63*DEVICE_WIDTH_RATIO,
},
bottom: {
height: 141*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
alignItems: 'center',
flexDirection: 'row',
},
qr: {
height: 80*DEVICE_WIDTH_RATIO,
width: 80*DEVICE_WIDTH_RATIO,
},
bottomDetail: {
height: 80*DEVICE_WIDTH_RATIO,
width: 245*DEVICE_WIDTH_RATIO,
},
titleV: {
width: 218*DEVICE_WIDTH_RATIO,
height: 20*DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center',
marginTop: 16*DEVICE_WIDTH_RATIO,
marginLeft: 27*DEVICE_WIDTH_RATIO,
},
titleText: {
fontSize: 16,
color: '#444444',
},
tipDetailText: {
fontSize: 12,
color: '#B0B0B0',
marginTop: 12*DEVICE_WIDTH_RATIO,
marginLeft: 27*DEVICE_WIDTH_RATIO,
},
shareView: {
position: 'absolute',
width,
height: 171*DEVICE_WIDTH_RATIO,
backgroundColor: 'rgb(241,241,241)',
alignItems: 'center',
bottom : 0,
},
image :{
width: 305*DEVICE_WIDTH_RATIO,
height: 88*DEVICE_WIDTH_RATIO,
marginTop: 25*DEVICE_WIDTH_RATIO,
backgroundColor: 'red',
},
buttons: {
width,
height: 115*DEVICE_WIDTH_RATIO,
alignItems: 'center',
flexDirection: 'row',
},
button1: {
alignItems: 'center',
marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
},
button2: {
marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
alignItems: 'center',
},
icon: {
width: 45*DEVICE_WIDTH_RATIO,
height: 45*DEVICE_WIDTH_RATIO,
},
text: {
marginTop: 8*DEVICE_WIDTH_RATIO,
fontSize: 12,
width: 90*DEVICE_WIDTH_RATIO,
textAlign: 'center',
color: '#444444',
},
line: {
width: width - 52,
height: 1,
backgroundColor: '#CCCCCC',
},
save: {
width,
height: 54*DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
savetext: {
fontSize: 17,
color: '#444444',
},
cancelBtn: {
position: 'absolute',
width: 54*DEVICE_WIDTH_RATIO,
height: 54*DEVICE_WIDTH_RATIO,
top: 44,
right: 34,
alignItems: 'flex-end',
},
cancelBtnicon: {
width: 30*DEVICE_WIDTH_RATIO,
height: 30*DEVICE_WIDTH_RATIO,
},
});
... ...