mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 7a6c446e43732c862279d1872762c032853406fd 1 parent 5539cc78

add 逛详情 商品列表 新样式 review by hongmo

Inline Side-by-side
Showing 1 changed file with 105 additions and 30 deletions
... ... @@ -3,6 +3,7 @@
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
const {
AppRegistry,
... ... @@ -14,6 +15,7 @@ const {
TouchableOpacity,
Platform,
NativeModules,
ListView,
} = ReactNative;
... ... @@ -23,6 +25,14 @@ export default class GoodsCell extends React.Component {
this.state = {
moreProduct: true,
};
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
this.renderRow = this.renderRow.bind(this);
this._renderCellType1 = this._renderCellType1.bind(this);
this._renderCellType2 = this._renderCellType2.bind(this);
}
shouldComponentUpdate(nextProps,nextState){
... ... @@ -33,23 +43,46 @@ export default class GoodsCell extends React.Component {
}
}
render() {
let {resource, articleId} = this.props;
let originList = resource.get('productList');
let listSize = originList?originList.size:0;
if (!originList || listSize == 0) {
return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
}
let list = originList;
if (this.state.moreProduct && listSize > 2) {
list = originList.slice(0,2);
}
let surplusSize = listSize-2;
let moreStr = '展开剩余'+ surplusSize + '个商品';
renderRow(rowData, sectionID, rowID, highlightRow) {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
}
//两列多行的样式
_renderCellType2(list) {
let backgroundWidth = width;
let showMoreViewHeigth = (this.state.moreProduct && listSize > 2)?60:0;
let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
return(
let backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20;
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
<ListView
contentContainerStyle={styles.contentContainer}
initialListSize={Math.ceil(list.size)}
dataSource={this.dataSource.cloneWithRows(list.toArray())}
enableEmptySections={true}
renderRow={this.renderRow}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
//单列多行的样式
_renderCellType1(list) {
let backgroundWidth = width;
let backgroundHeight = Math.ceil(list.size) * (rowHeight+1);
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
{list.map((value, i) => {
let product = value?value.toJS():null;
... ... @@ -101,21 +134,53 @@ export default class GoodsCell extends React.Component {
</TouchableOpacity>
);
})}
{(this.state.moreProduct && listSize > 2) ? <TouchableOpacity style={styles.more} activeOpacity={0.5} onPress={() => {
let params = {
ID: articleId + '' ,
};
NativeModules.YH_CommonHelper.logEvent('YB_STROLL_DETAIL_MORE_GODS_C', params);
this.setState({moreProduct: !this.state.moreProduct});
}}>
<View style={styles.more}>
<Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
<View style={styles.arrowView}>
<Image source={require('../../image/arrow_ic.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
</View>
);
}
render() {
let {resource, articleId} = this.props;
let originList = resource.get('productList');
let display_template = resource.get('display_template')?resource.get('display_template'):1;
let listSize = originList?originList.size:0;
if (!originList || listSize == 0) {
return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
}
let prudoctLimitRow = 2;
if (display_template == 2) {
prudoctLimitRow = 4;
}
let list = originList;
if (this.state.moreProduct && listSize > prudoctLimitRow) {
list = originList.slice(0,prudoctLimitRow);
}
let surplusSize = listSize-prudoctLimitRow;
let moreStr = '展开剩余'+ surplusSize + '个商品';
let backgroundWidth = width;
let showMoreViewHeigth = (this.state.moreProduct && listSize > prudoctLimitRow)?60:0;
let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
if (display_template == 2) {
backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20 + showMoreViewHeigth;
}
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
{display_template == 1 ? this._renderCellType1(list) : this._renderCellType2(list)}
{(this.state.moreProduct && listSize > 2) ?
<TouchableOpacity style={styles.more} activeOpacity={0.5} onPress={() => {
let params = {ID: articleId + ''};
NativeModules.YH_CommonHelper.logEvent('YB_STROLL_DETAIL_MORE_GODS_C', params);
this.setState({moreProduct: !this.state.moreProduct});
}}>
<View style={styles.more}>
<Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
<View style={styles.arrowView}>
<Image source={require('../../image/arrow_ic.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
</View>
</View>
</View>
</TouchableOpacity>:null}
</TouchableOpacity>:null}
</View>
);
}
... ... @@ -125,6 +190,9 @@ let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 750;
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
let imageWidth = Math.ceil((rowHeight - 20) * (235/314));
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let cellHeight = Math.ceil(254 * (width / 320));
let styles = StyleSheet.create({
content_View: {
... ... @@ -132,6 +200,13 @@ let styles = StyleSheet.create({
width:width,
backgroundColor: 'white',
},
contentContainer:{
flexDirection: 'row',
flexWrap: 'wrap',
},
listContainer: {
width: width / 2,
},
single_View: {
height: rowHeight,
width:width,
... ...