uatcomponent/src/container/productList/productList.js

公司内部使用自定义简单组件

/**
* 备注：商品列表类型
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		Dimensions,
} from 'react-native';
import { ComponentProps,ProductProps,ProductItemProps,ProductModel,ScrollDataType, LinkType, } from "../../model";
import { RecommendProductItem } from 'uatcomponent/src/container/recommendProductList/view/recommendProductItem';
import { autoBaseUrl, isWidthDevice } from 'uatcomponent/src/util';

type Props = {
		style : ViewStyle,
} & ComponentProps<ProductModel,ScrollDataType>;

type State = {};

export class ProductList extends Component <Props,State>{
		static defaultProps :Props = {
		}
		state:State={
		}
		static getSpace():Number{
			return 10;
		}
		static getStyleByType(isWidth:Boolean,index:Number,columns:Number):ViewStyle{
			const SCREEN_WIDTH : Number = Dimensions.get('window').width;
			const SPACE  : Number = ProductList.getSpace();
			const ITEM_WIDTH : Number = (SCREEN_WIDTH-SPACE*(columns+1))/columns;
			if(columns==2){
				switch(index%columns){
					case 0:return {width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginLeft:SPACE,marginRight:SPACE/2,marginBottom:SPACE};
					case 1:return {width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginRight:SPACE,marginLeft:SPACE/2,marginBottom:SPACE};
					default:return {};
				}
			}else if(columns==3){
				switch(index%columns){
					case 0:return {width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginLeft:SPACE,marginRight:SPACE/2,marginBottom:SPACE};
					case 1:return {width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginLeft:SPACE/2,marginRight:SPACE/2,marginBottom:SPACE};
					case 2:return {width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginLeft:SPACE/2,marginRight:SPACE,marginBottom:SPACE};
					default:return{};
				}
			}
		}
		render(){
				const {style,data,baseUrl,} = this.props;
				const list : ProductProps[] = data.content.goodslist;
				const isPad:Boolean = isWidthDevice();
				const columns:Number = isPad?3:2;
				
				return (
						<View style={[styles.container,style]}>
								{/* <Text>{JSON.stringify(list)}</Text> */}
								{
									list.map((item,index,a)=>{
										let STYLE:ViewStyle = ProductList.getStyleByType(isPad,index,columns);
									return <RecommendProductItem 
																							key={`${item.link}_${index}_productList`}
																							data={{...item,pic:autoBaseUrl(baseUrl,item.pic)}} 
																							onClick={()=>{
																								this.props.onClick && this.props.onClick(this.props.data,{
																									link:item.link,
																									linkType:LinkType.SelectProduct,
																									title:item.title,
																									pic:item.pic,
																								})
																							}} 
																							style={STYLE}
																							itemWidth={STYLE.width}
																						/>})
								}
						</View>
				)
		}
}

const styles = StyleSheet.create({
	// container:{},
		container:{flexDirection:'row',flexWrap:'wrap'},
		// itemContainer_left:{width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginLeft:SPACE,marginRight:SPACE/2,marginBottom:SPACE},
		// itemContainer_right:{width:ITEM_WIDTH,height:ITEM_WIDTH+48,marginRight:SPACE,marginLeft:SPACE/2,marginBottom:SPACE},

		// itemContainer_left_3:{},
		// itemContainer_right_3:{},
		// itemContainer_middle_3:{},
})