mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit cca1871af8a48d539d50957aa5a80a92fa525ae7 2 parents ff40184b fa8e21df

Merge branch 'local' into 5.4.1

Inline Side-by-side
Showing 3 changed files with 182 additions and 5 deletions
... ... @@ -19,10 +19,17 @@ export default class HeadTitleCell extends Component{
render(){
let {title, moreUrl} = this.props;
return(
<View style={styles.container}>
<Text style={styles.headerText}>潮流`优选</Text>
<Image style={styles.headerMore} source={require("../../images/head_title_more.png")}/>
<Text style={styles.headerText}>{title}</Text>
{
(moreUrl && moreUrl != "") ?
<Image style={styles.headerMore} source={require("../../images/head_title_more.png")}/>
: null
}
</View>
);
}
... ... @@ -38,7 +45,7 @@ let styles = StyleSheet.create({
container: {
width: width,
height: 40 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
backgroundColor: '#e5e5e5',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
... ...
'use strict';
import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
... ... @@ -25,8 +27,8 @@ export default class DivideImage extends Component{
render(){
//测试数据
let rowData = {"template_name":"divideImage","data":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/11/24/13/01d93f236d113d1a9f9f93d2163a6b5080.jpg?imageView2/{mode}/w/{width}/h/{height}","alt":"","url":""}],"template_intro":"分隔图","template_id":"113991"}
let url = rowData.data[0].src;
let rowData = Immutable.fromJS({"template_name":"divideImage","data":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/11/24/13/01d93f236d113d1a9f9f93d2163a6b5080.jpg?imageView2/{mode}/w/{width}/h/{height}","alt":"","url":""}],"template_intro":"分隔图","template_id":"113991"});
let url = rowData.get("data").get(0).get("src");
let imageUrl = SlicedImage.getSlicedUrl(url, width, height, 2);
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Image,
TouchableOpacity,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import HeadTitleCell from '../cell/HeadTitleCell';
/**
* 新品到着楼层,
* 这个楼层是左边一个大图（第一条数据），右边是四张小图，左上图（第二条数据），左下图（第三条数据），右上图（第四条数据），右下图（第五条数据）
**/
export default class NewProductFloor extends Component{
constructor(props) {
super(props);
}
render(){
//测试数据
let rowData = Immutable.fromJS({"template_name":"NewProductFloor","data":{"title":{"more_name":"...","name":"一周精选","title":"一周精选","more_url":""},"list":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2017/01/20/11/01b18ee60e2e9609033a5ad38efc613c8e.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://feature.yoho.cn/0120/0120FENQI/index.html?title=有货分期&share_id=1439&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1439\",\"title\":\"有货分期\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1439\"},\"title\":\"有货分期\",\"url\":\"https://feature.yoho.cn/0120/0120FENQI/index.html\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/20/17/01f0604dfef7a6cc75b33c62fcb5acdecb.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/activity/shopCollect?channel_id=3&title=vip新品抢鲜&code=8eea98740b3645cddb41629aa5dbf6ab&share_id=25&tab_name=欧美大牌&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"param\":{\"share_id\":\"25\",\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"tab_name\":\"欧美大牌\",\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\"},\"tab_name\":\"欧美大牌\",\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"25\"},\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\",\"url\":\"https://m.yohobuy.com/activity/shopCollect\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/20/17/011c7324b07161859654c6bc512cc2bc21.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://feature.yoho.cn/0124/0124PINPAIBOY/index.html?title=精选潮牌专场&share_id=1607&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1607\",\"title\":\"精选潮牌专场\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1607\"},\"title\":\"精选潮牌专场\",\"url\":\"https://feature.yoho.cn/0124/0124PINPAIBOY/index.html\"}}"},{"src":"http://img10.static.yhbimg.com/yhb-img01/2016/12/20/17/0113067023a8f323294982d391fc2534eb.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/activity/shopCollect?channel_id=3&title=vip新品抢鲜&code=8eea98740b3645cddb41629aa5dbf6ab&share_id=25&tab_name=欧美大牌&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"param\":{\"share_id\":\"25\",\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"tab_name\":\"欧美大牌\",\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\"},\"tab_name\":\"欧美大牌\",\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"25\"},\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\",\"url\":\"https://m.yohobuy.com/activity/shopCollect\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/13/09/01f52bb02ed578eab606cbf402430e7cfe.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/guang/star/?openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{},\"url\":\"https://m.yohobuy.com/guang/star/\"}}"}]}});
let title = rowData.get("data").get("title");
let imglst = rowData.get("data").get("list");
let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
let rightSmallTopLeftImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let rightSmallBottomLeftImageUrl = SlicedImage.getSlicedUrl(imglst.get(2).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let rightSmallTopRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
let rightSmallBottomRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
return(
<View style={styles.container}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} />
<View style={styles.imageContainer}>
<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<Image style={styles.leftBigImage} key={leftBigImageUrl} source={{uri: leftBigImageUrl}}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallTopLeftImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).toJS())}>
<Image style={styles.rightSmallTopLeftImage} key={rightSmallTopLeftImageUrl} source={{uri: rightSmallTopLeftImageUrl}}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallBottomLeftImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).toJS())}>
<Image style={styles.rightSmallBottomLeftImage} key={rightSmallBottomLeftImageUrl} source={{uri: rightSmallBottomLeftImageUrl}}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallTopRightImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(3).toJS())}>
<Image style={styles.rightSmallTopRightImage} key={rightSmallTopRightImageUrl} source={{uri: rightSmallTopRightImageUrl}}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallBottomRightImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(4).toJS())}>
<Image style={styles.rightSmallBottomRightImage} key={rightSmallBottomRightImageUrl} source={{uri: rightSmallBottomRightImageUrl}}/>
</TouchableOpacity>
</View>
</View>
);
}
};
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
let rightSmallImageWidth = (width - leftBigImageWidth) / 2;
let rightSmallImageHeight = leftBigImageHeight / 2;
let styles = StyleSheet.create({
container: {
width: width,
backgroundColor: "#e5e5e5",
},
imageContainer: {
width: width,
height: leftBigImageHeight,
},
leftBigImageContainer: {
position: 'absolute',
top: 0,
left: 0,
width: leftBigImageWidth,
height: leftBigImageHeight,
},
leftBigImage: {
width: leftBigImageWidth,
height: leftBigImageHeight,
},
rightSmallTopLeftImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallTopLeftImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomLeftImageContainer: {
position: 'absolute',
top: rightSmallImageHeight,
left: leftBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomLeftImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallTopRightImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth + rightSmallImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallTopRightImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomRightImageContainer: {
position: 'absolute',
top: rightSmallImageHeight,
left: leftBigImageWidth + rightSmallImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomRightImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
});
... ...