|
|
'use strict';
|
|
|
import React from 'react';
|
|
|
import ReactNative, {
|
|
|
View,
|
|
|
Text,
|
|
|
Image,
|
|
|
StyleSheet,
|
|
|
Dimensions,
|
|
|
PixelRatio,
|
|
|
TouchableOpacity,
|
|
|
Alert,
|
|
|
} from 'react-native';
|
|
|
|
|
|
import Immutable, {Map} from 'immutable';
|
|
|
import {getSlicedUrl} from '../../../classify/utils/Utils';
|
|
|
|
|
|
export default class AdvertisementView extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
let{dataSource}=this.props;
|
|
|
dataSource = {
|
|
|
"alt": "",
|
|
|
"src": "http://img10.static.yhbimg.com/yhb-img01/2016/11/23/16/0191a7b024e397cd8989ee0ee25dce9f29.png?imageView2/{mode}/w/{width}/h/{height}",
|
|
|
"title": "",
|
|
|
"url": "http://feature.yoho.cn/0906/TIPGOODS/index.html?title=潮流尖货&share_id=1335"
|
|
|
};
|
|
|
return(
|
|
|
<View style={styles.container}>
|
|
|
<TouchableOpacity activeOpacity={1.0} onPress={() => {
|
|
|
this.props.jumpWithUrl && this.props.jumpWithUrl(dataSource.url);
|
|
|
}}>
|
|
|
<View style={styles.imageContainer}>
|
|
|
<Image
|
|
|
source={require('../../image/close-btn.png')}
|
|
|
style={styles.closeBtn}
|
|
|
resizeMode={'contain'}
|
|
|
/>
|
|
|
<Image
|
|
|
source={{uri: getSlicedUrl(dataSource.src, width, 105*DEVICE_WIDTH_RATIO, 2)}}
|
|
|
style={styles.image}
|
|
|
resizeMode={'contain'}
|
|
|
/>
|
|
|
</View>
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
let {width, height} = Dimensions.get('window');
|
|
|
const DEVICE_WIDTH_RATIO = width / 320;
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
container: {
|
|
|
position:'absolute',
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
backgroundColor:'rgba(44, 44, 44, 0.5)',
|
|
|
height: height,
|
|
|
width: width,
|
|
|
},
|
|
|
imageContainer: {
|
|
|
width: 270 * DEVICE_WIDTH_RATIO,
|
|
|
height: 275 * DEVICE_WIDTH_RATIO,
|
|
|
position: 'relative',
|
|
|
marginTop: (height - 275 * DEVICE_WIDTH_RATIO - 64) / 2,
|
|
|
marginLeft: (width - 270 * DEVICE_WIDTH_RATIO) / 2,
|
|
|
backgroundColor:'rgba(237, 237, 237, 0.8)',
|
|
|
borderRadius: 5,
|
|
|
},
|
|
|
closeBtn: {
|
|
|
width: 28 * DEVICE_WIDTH_RATIO,
|
|
|
height: 28 * DEVICE_WIDTH_RATIO,
|
|
|
position: 'absolute',
|
|
|
right: 34 * DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
image: {
|
|
|
width: 270 * DEVICE_WIDTH_RATIO,
|
|
|
height: 275 * DEVICE_WIDTH_RATIO,
|
|
|
position: 'absolute',
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
},
|
|
|
}); |
...
|
...
|
|