'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} numberOfLines={1}>有货友拼团,潮人专属福利团</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: 13, color: '#444444', }, tipDetailText: { fontSize: 11, 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, }, });