mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 489a9c8fa0f07e20c7f13ac824306ad372ab6066 1 parent b1003f69

add share review by daiqiang

Inline Side-by-side
Showing 3 changed files with 211 additions and 83 deletions
... ... @@ -30,17 +30,15 @@ export default class ShareViewModal extends React.Component {
}}>
<View style={styles.modalContainer}>
<View style={styles.shareView}>
<View style={styles.image}>
</View>
<View style={styles.buttons}>
<TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
this.props.showSnapshootShare && this.props.showSnapshootShare(1,false);
this.props.shareMiniApp && this.props.shareMiniApp();
}}>
<Image source={require('../images/weixin.png')} style={styles.icon} />
<Text style={styles.text}>分享给好友</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
this.props.showSnapshootShare && this.props.showSnapshootShare(2,true);
this.props.showSnapshootShare && this.props.showSnapshootShare(true);
}}>
<Image source={require('../images/pengyou.png')} style={styles.icon} />
<Text style={styles.text}>微信快照</Text>
... ... @@ -73,7 +71,7 @@ let styles = StyleSheet.create({
},
shareView: {
width,
height: 284*DEVICE_WIDTH_RATIO,
height: 171*DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
alignItems: 'center',
},
... ...
... ... @@ -17,6 +17,7 @@ const {
Text,
CameraRoll,
Alert,
ScrollView,
} = ReactNative;
... ... @@ -24,6 +25,17 @@ export default class SnapshootShare extends React.Component {
constructor(props) {
super(props);
this.saveImage = this.saveImage.bind(this);
this.shareImage = this.shareImage.bind(this);
}
shareImage(index){
ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
(uri) => {
this.props.shareSnapshootAction && this.props.shareSnapshootAction(index,uri);
}).catch(
(error) => {
Alert.alert('图片生成失败!')
});
}
saveImage(){
... ... @@ -39,8 +51,8 @@ export default class SnapshootShare extends React.Component {
(error) => {
Alert.alert('保存失败!')
});
this.props.showSnapshootShare && this.props.showSnapshootShare(2,false);
}
render() {
let { groupDetail ,qrCode} = this.props;
let productDetail = groupDetail ? groupDetail.toJS():null;
... ... @@ -71,13 +83,17 @@ export default class SnapshootShare extends React.Component {
onRequestClose={() => {
}}>
<View style={styles.modalContainer}>
<ScrollView
style={styles.scrollView}
vertical={true}
>
<View style={styles.container} ref='container'>
<View style={styles.titleV}>
<Text style={styles.name}>{nickName}</Text>
<Text style={styles.commonText}>邀请你参团</Text>
</View>
<View style={styles.product}>
<YH_Image style={styles.image} url={productIcon}></YH_Image>
<YH_Image style={styles.productimage} url={productIcon}></YH_Image>
<View style={styles.right}>
<View style={styles.titleView}>
<Text style={styles.title} numberOfLines={2}>{productName}</Text>
... ... @@ -107,10 +123,35 @@ export default class SnapshootShare extends React.Component {
<Text style={styles.tipDetailText}>实际价格以页面展示为准</Text>
</View>
</View>
<TouchableOpacity activeOpacity={1} style={styles.saveButton} onPress={() => {
this.saveImage();
<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(0);
}}>
<Image source={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(1);
}}>
<Image source={require('../images/pengyou.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);
}}>
<Text style={styles.saveButtonText}>保存图片分享到朋友圈</Text>
<Image source={require('../images/pengyou.png')} style={styles.cancelBtnicon} resizeMode={'contain'}/>
</TouchableOpacity>
</View>
... ... @@ -121,56 +162,45 @@ export default class SnapshootShare extends React.Component {
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
const sc = 0.8;
let styles = StyleSheet.create({
modalContainer: {
width: width,
height: height,
},
backContainer: {
flex: 1,
width: width,
height: height,
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
saveButton: {
width: 300*DEVICE_WIDTH_RATIO,
height: 44*DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
alignItems: 'center',
marginTop: 10*DEVICE_WIDTH_RATIO,
borderRadius: 4,
justifyContent: 'center',
},
saveButtonText: {
fontSize: 16*DEVICE_WIDTH_RATIO,
color: '#444444',
},
container: {
width: 300*DEVICE_WIDTH_RATIO,
height: 482*DEVICE_WIDTH_RATIO,
width,
height,
backgroundColor: 'white',
alignItems: 'center',
marginTop: 60*DEVICE_WIDTH_RATIO,
},
titleV: {
width: 300*DEVICE_WIDTH_RATIO,
height: 22*DEVICE_WIDTH_RATIO*sc,
height: 22*DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 34*DEVICE_WIDTH_RATIO*sc,
marginTop: 60*DEVICE_WIDTH_RATIO,
},
name: {
fontSize: 16*sc,
fontSize: 16,
color: '#D0021B',
},
commonText: {
fontSize: 16*sc,
fontSize: 16,
color: '#000000',
},
product: {
width: 300*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
width: 300*DEVICE_WIDTH_RATIO,
height: 141*DEVICE_WIDTH_RATIO,
shadowColor: 'rgba(0,0,0,0.4)',
shadowOffset: {width: 0, height: 5},
shadowOpacity: 0.5,
... ... @@ -178,53 +208,61 @@ let styles = StyleSheet.create({
elevation: 4,
flexDirection: 'row',
backgroundColor: 'white',
marginTop: 34*DEVICE_WIDTH_RATIO*sc,
marginTop: 34*DEVICE_WIDTH_RATIO,
},
image: {
width: 109*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
productimage: {
width: 109*DEVICE_WIDTH_RATIO,
height: 141*DEVICE_WIDTH_RATIO,
},
right: {
width: 191*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
width: 191*DEVICE_WIDTH_RATIO,
height: 141*DEVICE_WIDTH_RATIO,
flexDirection: 'column',
},
titleView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 32*DEVICE_WIDTH_RATIO*sc,
marginTop: 17*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
width: 174*DEVICE_WIDTH_RATIO,
height: 32*DEVICE_WIDTH_RATIO,
marginTop: 17*DEVICE_WIDTH_RATIO,
marginLeft: 10*DEVICE_WIDTH_RATIO,
},
scrollView: {
backgroundColor: 'white',
},
spaceV: {
backgroundColor: 'white',
height: 171*DEVICE_WIDTH_RATIO,
width,
},
title: {
fontSize: 12*sc,
fontSize: 12,
color: '#444444',
lineHeight: 19*sc,
lineHeight: 19,
},
subPriceView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 14*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
marginTop: 5*DEVICE_WIDTH_RATIO*sc,
width: 174*DEVICE_WIDTH_RATIO,
height: 14*DEVICE_WIDTH_RATIO,
marginLeft: 10*DEVICE_WIDTH_RATIO,
marginTop: 5*DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center',
},
subPrice1: {
fontSize: 10*sc,
fontSize: 10,
color: '#B0B0B0',
lineHeight: 10*DEVICE_WIDTH_RATIO*sc,
lineHeight: 10*DEVICE_WIDTH_RATIO,
},
priceView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 21*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
marginTop: 33*DEVICE_WIDTH_RATIO*sc,
width: 174*DEVICE_WIDTH_RATIO,
height: 21*DEVICE_WIDTH_RATIO,
marginLeft: 10*DEVICE_WIDTH_RATIO,
marginTop: 33*DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center',
},
iconTextView: {
width: 40*DEVICE_WIDTH_RATIO*sc,
height: 14*DEVICE_WIDTH_RATIO*sc,
width: 40*DEVICE_WIDTH_RATIO,
height: 14*DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#D0021B',
... ... @@ -235,22 +273,22 @@ let styles = StyleSheet.create({
textAlign: 'center',
},
price1: {
fontSize: 18*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
fontSize: 18,
marginLeft: 10*DEVICE_WIDTH_RATIO,
color: '#444444',
lineHeight: 18*DEVICE_WIDTH_RATIO*sc,
lineHeight: 18*DEVICE_WIDTH_RATIO,
fontWeight: 'bold',
},
oldPriceContainer: {
flexDirection: 'row',
height: 12*sc,
marginTop: 2*sc,
height: 12,
marginTop: 2,
},
price2: {
fontSize: 12*sc,
lineHeight: 12*sc,
fontSize: 12,
lineHeight: 12,
color: '#B0B0B0',
alignItems: 'center',
},
... ... @@ -263,32 +301,98 @@ let styles = StyleSheet.create({
backgroundColor: '#b0b0b0',
},
logo: {
height: 19*DEVICE_WIDTH_RATIO*sc,
height: 19*DEVICE_WIDTH_RATIO,
width: 300*DEVICE_WIDTH_RATIO,
marginTop: 80*DEVICE_WIDTH_RATIO*sc,
marginTop: 80*DEVICE_WIDTH_RATIO,
},
qr: {
height: 120*DEVICE_WIDTH_RATIO*sc,
width: 120*DEVICE_WIDTH_RATIO*sc,
marginTop: 25*DEVICE_WIDTH_RATIO*sc,
height: 120*DEVICE_WIDTH_RATIO,
width: 120*DEVICE_WIDTH_RATIO,
marginTop: 25*DEVICE_WIDTH_RATIO,
},
tip: {
fontSize: 14*sc,
fontSize: 14,
color:'#444444',
marginTop: 16*DEVICE_WIDTH_RATIO*sc,
marginTop: 16*DEVICE_WIDTH_RATIO,
},
tipDetailView: {
flexDirection: 'row',
},
tipicon: {
marginTop: 10*DEVICE_WIDTH_RATIO*sc,
height: 15*DEVICE_WIDTH_RATIO*sc,
width: 15*DEVICE_WIDTH_RATIO*sc,
marginTop: 10*DEVICE_WIDTH_RATIO,
height: 15*DEVICE_WIDTH_RATIO,
width: 15*DEVICE_WIDTH_RATIO,
},
tipDetailText: {
fontSize: 12,
color: '#B0B0B0',
marginTop: 10*DEVICE_WIDTH_RATIO*sc,
marginLeft: 5*DEVICE_WIDTH_RATIO*sc,
marginTop: 10*DEVICE_WIDTH_RATIO,
marginLeft: 5*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: {
marginLeft: 90*DEVICE_WIDTH_RATIO,
alignItems: 'center',
},
button2: {
marginLeft: 105*DEVICE_WIDTH_RATIO,
alignItems: 'center',
},
icon: {
width: 45*DEVICE_WIDTH_RATIO,
height: 45*DEVICE_WIDTH_RATIO,
},
text: {
marginTop: 8*DEVICE_WIDTH_RATIO,
fontSize: 12,
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: 34*DEVICE_WIDTH_RATIO,
height: 34*DEVICE_WIDTH_RATIO,
},
});
... ...
... ... @@ -44,7 +44,10 @@ class GroupPurchaseDetailContainer extends Component {
this.goComment = this.goComment.bind(this);
this.didTouchButton = this.didTouchButton.bind(this);
this.showShareView = this.showShareView.bind(this);
this.shareMiniApp = this.shareMiniApp.bind(this);
this.showSnapshootShare = this.showSnapshootShare.bind(this);
this.shareSnapshootAction = this.shareSnapshootAction.bind(this);
}
componentDidMount() {
... ... @@ -64,6 +67,11 @@ class GroupPurchaseDetailContainer extends Component {
this.props.actions.updateTime(leftTime);
}
didTouchButton(resource){
this.props.actions.showShareView(true);
return;
let pageGo = resource.pageGo ? resource.pageGo : 0;
let { activityId } = this.props.groupPurchaseDetail;
if(pageGo == 1) {
... ... @@ -77,6 +85,16 @@ class GroupPurchaseDetailContainer extends Component {
}
}
shareSnapshootAction(index,url) {
let param = {
index,
imageUrl: url,
}
console.log(param);
ReactNative.NativeModules.YH_CommonHelper.shareImageToWXMini(param);
this.props.actions.showSnapshootShare(false);
}
didTouchProduct(productSkn,activityId) {
console.log(productSkn);
console.log(activityId);
... ... @@ -93,13 +111,20 @@ class GroupPurchaseDetailContainer extends Component {
this.props.actions.showShareView(show);
}
showSnapshootShare(index,show){
shareMiniApp(){
this.props.actions.showShareView(false);
if(index == 1){
//share weixin
}else if (index == 2) {
this.props.actions.showSnapshootShare(show);
let param = {
title: 'aaaa',
image: 'http://img10.static.yhbimg.com/goodsimg/2015/12/31/06/0176f1c21e535e26e249f142779e884f47.jpg',
shareUrl: '',
miniProgramPath: '/pages/index/index',
}
ReactNative.NativeModules.YH_CommonHelper.shareWXMiniProgram(param);
}
showSnapshootShare(show){
this.props.actions.showShareView(false);
this.props.actions.showSnapshootShare(show);
}
_onEndReached() {
... ... @@ -128,11 +153,12 @@ class GroupPurchaseDetailContainer extends Component {
let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(param)) + '&name=' + groupNo + '&miniQrType=4';
return (
<View style={styles.container}>
<ShareViewModal show={showShareView} showShareView={this.showShareView} showSnapshootShare={this.showSnapshootShare}/>
<ShareViewModal show={showShareView} showShareView={this.showShareView} shareMiniApp={this.shareMiniApp} showSnapshootShare={this.showSnapshootShare}/>
<SnapshootShare
show={showSnapshootShare}
groupDetail={groupDetail}
showSnapshootShare={this.showSnapshootShare}
shareSnapshootAction={this.shareSnapshootAction}
qrCode={qrCode}
/>
<GroupPurchaseDetail
... ...