mobile / YH_RNComponent · Commits

Go to a project

Authored by Zhu-Arthur
Commit f6325a99ca846e633c35dc1838483608c7aef68b 2 parents 6d4d9b93 aea98c1f

merge 8.1.5 aea98c1f review by 戴强

Inline Side-by-side
Showing 5 changed files with 367 additions and 1 deletions
... ... @@ -4,7 +4,7 @@ import {Platform} from 'react-native';
// import Community from './community/Community';
import Plustar from './plustar/Plustar';
import Coupon from './coupon/Coupon';
// import QRCode from './qrcode/QRCode';
import QRCode from './qrcode/QRCode';
import BrandStore from './brandStore/BrandStore';
import Classify from './classify/Classify';
import Seckill from './seckill/Seckill';
... ...
... ... @@ -312,6 +312,9 @@ let styles = StyleSheet.create({
titleWidth: {
maxWidth: 80,
},
titleWidth: {
maxWidth: 80,
},
tipDetailText: {
fontSize: 12,
color: '#B0B0B0',
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
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){
ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
}).catch(
(error) => {
Alert.alert('图片生成失败!')
});
}
saveImage(){
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('保存失败!')
});
}
render() {
let { groupDetail ,qrCode, unionType} = this.props;
let productDetail = groupDetail ? groupDetail.toJS():null;
if(!productDetail){
return null;
}
let lackNum = productDetail.lackNum;
let membershipItems = productDetail.membershipItems;
let resource = membershipItems ? membershipItems[0]: null;
if (!resource) {
return null;
}
let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
let productGroupPrice = resource.productGroupPrice;
let productName = resource.productName;
let productSalePrice = resource.productSalePrice;
let productSkn = resource.productSkn;
let perpleNum = membershipItems.length + lackNum;
let nickName = resource.nickName;
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 style={styles.productDetail}>
<View style={styles.productDetailTop}>
<Text style={styles.productDetailTopText}>{productName}</Text>
</View>
<View style={styles.productDetailBottom}>
<Image source={require('../images/Group5.png')} style={styles.priceIcon} />
<Text style={styles.price}>{productGroupPrice}</Text>
<Text style={[styles.price2, {textDecorationLine: 'line-through'}]}>{productSalePrice}</Text>
</View>
</View>
<Image source={require('../images/Page.png')} resizeMode={'contain'} style={styles.mianyouIcon} />
</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, styles.titleWidth]} numberOfLines={1}>{nickName}</Text>
<Text style={styles.titleText}>邀请你拼潮货</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: 433*DEVICE_WIDTH_RATIO,
width: 325*DEVICE_WIDTH_RATIO,
},
product: {
height: 433*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',
},
titleWidth: {
maxWidth: 80,
},
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,
},
});
\ No newline at end of file
... ...
... ... @@ -104,6 +104,7 @@ class GroupPurchaseDetailContainer extends Component {
imageUrl: url,
fromPage,
}
ReactNative.NativeModules.YH_CommonHelper.shareImageToWXMini(param);
this.props.actions.showSnapshootShare(false);
}
... ...