mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 42031c90a1c4698368efc5a7859e08f71cd11f9e 2 parents 81c07037 72bc775d

Merge branch 'local' into 5.4.1

Inline Side-by-side
Showing 5 changed files with 377 additions and 70 deletions
import React from 'react';
import ReactNative from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
let {
requireNativeComponent,
View
} = ReactNative;
let YH_GoodsStoreView = requireNativeComponent('YH_GoodsStoreView', null);
export default class YH_GoodsStore extends React.Component {
static propTypes = {
data: React.PropTypes.string,
...View.propTypes // 包含默认的View的属性
};
constructor(props) {
super(props);
}
render() {
return <YH_GoodsStoreView {...this.props} data={this.props.data} />;
}
}
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
TouchableOpacity,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import HeadTitleCell from '../cell/HeadTitleCell';
/**
* 直播资源位楼层
* 这个楼层是三张大图构成
**/
export default class LivePicture extends Component{
constructor(props) {
super(props);
}
render(){
let data = this.props.data;
let title = data.get("title");
let imglst = data.get("list");
let image1Url = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), imageWidth, imageHeight, 2);
let image2Url = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), imageWidth, imageHeight, 2);
let image3Url = SlicedImage.getSlicedUrl(imglst.get(2).get("src"), imageWidth, imageHeight, 2);
return(
<View style={styles.container}>
<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} />
<View style={styles.imageContainer}>
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<YH_Image style={styles.imageLeftAndRight} url={image1Url}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).toJS())}>
<YH_Image style={styles.imageMiddle} url={image2Url}/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).toJS())}>
<YH_Image style={styles.imageLeftAndRight} url={image3Url}/>
</TouchableOpacity>
</View>
</View>
);
}
};
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let imageWidth = Math.ceil((width - 64) / 3);
let imageHeight = Math.ceil(imageWidth * 86 / 64);
let styles = StyleSheet.create({
container: {
width: width,
},
imageContainer: {
width: width,
paddingLeft: 16 * DEVICE_WIDTH_RATIO,
paddingRight: 16 * DEVICE_WIDTH_RATIO,
paddingTop: 16 * DEVICE_WIDTH_RATIO,
paddingBottom: 16 * DEVICE_WIDTH_RATIO,
flexDirection: "row",
},
imageLeftAndRight: {
width: imageWidth,
height: imageHeight,
},
imageMiddle: {
width: imageWidth,
height: imageHeight,
marginLeft: 16 * DEVICE_WIDTH_RATIO,
marginRight: 16 * DEVICE_WIDTH_RATIO,
},
});
... ...
... ... @@ -3,7 +3,8 @@
import React, {Component} from 'react';
import ReactNative, {
View,
Image,
Text,
ListView,
TouchableOpacity,
StyleSheet,
Dimensions,
... ... @@ -12,6 +13,7 @@ import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import HeadTitleCell from '../cell/HeadTitleCell';
/**
... ... @@ -23,32 +25,68 @@ export default class PopularSingleProduct extends Component{
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
this.renderRow = this.renderRow.bind(this);
}
renderRow(rowData,sectionID,rowID,highlightRow){
let goodsImageUrl = rowData.get('default_images');
goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, goodsImageWidth, goodsImageHeight, 2);
let goodsPrice = "¥" + rowData.get('sales_price');
let goodsLookNum = rowData.get('sales_num') + "人";
return(
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.toJS())}>
<View style={styles.goodsContainer}>
<YH_Image style={styles.goodsImage} url={goodsImageUrl} />
<Text style={styles.goodsPrice} numberOfLines={1}>{goodsPrice}</Text>
<Text style={styles.goodsLookNum} numberOfLines={1}>{goodsLookNum}</Text>
<Text style={styles.goodsLookNum} numberOfLines={1}>正在浏览</Text>
</View>
</TouchableOpacity>
);
}
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 data = this.props.data;
let background = Immutable.fromJS({"color": "#000000", "src": "?imageView2/{mode}/w/{width}/h/{height}"}); //data.get("background");
let bannerImage = data.get("banner_image");
let title = data.get("title");
let imglst = data.get("list");
// let backgroundStyle = background.get("color") ? {backgroundColor: background.get("color")} : null;
let bannerImageUrl = SlicedImage.getSlicedUrl(bannerImage.get(0).get("src"), width, bannerHeight, 2);
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')} />
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<Image style={styles.bannerImage} key={bannerImageUrl} source={{uri: bannerImageUrl}}/>
<TouchableOpacity activeOpacity={1} style={styles.bannerImage}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(bannerImage.get(0).toJS())}>
<YH_Image style={styles.bannerImage} url={bannerImageUrl}/>
</TouchableOpacity>
<ListView
style={styles.listViewContainer}
dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
horizontal={true}
renderRow={this.renderRow}
/>
</View>
);
... ... @@ -59,17 +97,16 @@ export default class PopularSingleProduct extends Component{
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let bannerHeight = width * 234 / 750;
let goodsImageWidth = 90 * DEVICE_WIDTH_RATIO;
let goodsImageHeight = 120 * DEVICE_WIDTH_RATIO;
let bannerHeight = Math.ceil(width * 234 / 750);
let goodsImageWidth = Math.ceil(90 * DEVICE_WIDTH_RATIO);
let goodsImageHeight = Math.ceil(120 * DEVICE_WIDTH_RATIO);
width = Math.ceil(width);
let styles = StyleSheet.create({
container: {
width: width,
backgroundColor: "#e5e5e5",
},
bannerImage: {
... ... @@ -77,71 +114,44 @@ let styles = StyleSheet.create({
height: bannerHeight,
},
leftBigImageContainer: {
position: 'absolute',
top: 0,
left: 0,
width: leftBigImageWidth,
height: leftBigImageHeight,
},
leftBigImage: {
width: leftBigImageWidth,
height: leftBigImageHeight,
listViewContainer: {
width: width,
height: 202 * DEVICE_WIDTH_RATIO,
paddingTop: 12 * DEVICE_WIDTH_RATIO,
paddingBottom: 12 * DEVICE_WIDTH_RATIO,
},
rightSmallTopLeftImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallTopLeftImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
goodsContainer: {
width: 90 * DEVICE_WIDTH_RATIO,
height: 178 * DEVICE_WIDTH_RATIO,
marginLeft: 11 * DEVICE_WIDTH_RATIO,
backgroundColor: '#f0f0f0',
},
rightSmallBottomLeftImageContainer: {
position: 'absolute',
top: rightSmallImageHeight,
left: leftBigImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomLeftImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
goodsImage: {
width: goodsImageWidth,
height: goodsImageHeight,
},
rightSmallTopRightImageContainer: {
position: 'absolute',
top: 0,
left: leftBigImageWidth + rightSmallImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
goodsPrice: {
width: goodsImageWidth,
fontSize: 12,
color: '#444444',
textAlign: 'center',
marginTop: 3 * DEVICE_WIDTH_RATIO,
},
rightSmallTopRightImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
goodsLookNum: {
width: goodsImageWidth,
fontSize: 10,
color: '#b0b0b0',
textAlign: 'center',
},
rightSmallBottomRightImageContainer: {
position: 'absolute',
top: rightSmallImageHeight,
left: leftBigImageWidth + rightSmallImageWidth,
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
rightSmallBottomRightImage: {
width: rightSmallImageWidth,
height: rightSmallImageHeight,
},
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
ListView,
TouchableOpacity,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import YH_GoodsStore from '../../../common/components/YH_GoodsStore';
/**
* 好店推荐楼层,
* 这个楼层是滚动的3D大图
**/
export default class ShopRecommend extends Component{
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
}
render(){
let data = this.props.data;
return(
<View style={styles.container}>
<YH_GoodsStore style={styles.container} data={data} />
</View>
);
}
};
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
width = Math.ceil(width);
let styles = StyleSheet.create({
container: {
width: width,
height: 279 * DEVICE_WIDTH_RATIO,
},
});
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
ListView,
TouchableOpacity,
StyleSheet,
Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import HeadTitleCell from '../cell/HeadTitleCell';
/**
* 六图并列楼层,
* 这个楼层是六个图片，一行两个展示
**/
export default class SixLinesFloor extends Component{
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
this.renderRow = this.renderRow.bind(this);
}
renderRow(rowData,sectionID,rowID,highlightRow){
let goodsImageUrl = rowData.get('src');
goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, imageWidth, imageHeight, 2);
return(
<TouchableOpacity activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.toJS())}>
<YH_Image style={styles.goodsImage} url={goodsImageUrl} />
</TouchableOpacity>
);
}
render(){
let data = this.props.data;
let title = data.get("title");
let imglst = data.get("list");
return(
<View style={styles.container}>
<HeadTitleCell title={title.get('name')} moreUrl={title.get('more_url')} />
<ListView
contentContainerStyle={styles.listViewContainer}
dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
renderRow={this.renderRow}/>
</View>
);
}
};
let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let imageWidth = Math.ceil(width / 2);
let imageHeight = Math.ceil(imageWidth * 180 / 375);
let styles = StyleSheet.create({
container: {
width: width,
},
listViewContainer: {
width: width,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'flex-start',
},
goodsImage: {
width: imageWidth,
height: imageHeight,
},
});
... ...