uatcomponent/src/container/recommendProductList/view/recommendProductItem.js

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

/**
* 备注：商品显示
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		Dimensions,
		TouchableWithoutFeedback,
} from 'react-native';
import { RecommendProductProps,RecommendItem,ProductItemProps,ProductProps, } from "../../../model";
type Props = {
		style : ViewStyle,
		data : ProductProps,
		onClick : (data:ProductProps)=>{},
		itemWidth:Number,
} ;
type State = {};

const SCREEN_WIDTH : Number = Dimensions.get('window').width;
const IMG_WIDTH : Number = (SCREEN_WIDTH-30)/2;
export class RecommendProductItem extends Component <Props,State>{
		static defaultProps :Props = {
			itemWidth:100,
		}
		state:State={
		}
		onItemClick = ()=>{
			this.props.onClick && this.props.onClick(this.props.data);
		}
		render(){
				const {style,data,itemWidth} = this.props;
				const model : RecommendItem = new RecommendItem(data);
				return (
						<TouchableWithoutFeedback 
								onPress={this.onItemClick}
								style={[styles.container]}>
								<View style={[styles.content,style]}>
									<Image source={{uri:model._pic}} style={[styles.img,{width:itemWidth,height:itemWidth}]}/>
									<View style={styles.textContainer}>
									<Text style={styles.title} numberOfLines={2}>{model._title}</Text>
									</View>
								</View>
						</TouchableWithoutFeedback>
				)
		}
}

const styles = StyleSheet.create({
		container:{paddingVertical:5},
		content:{backgroundColor: 'white',borderRadius:8,padding:0,backgroundColor: 'white',borderWidth:0,borderColor:'#eeeeee',shadowColor:'gray',shadowOffset:{width:0,height:0},shadowOpacity:0.6,shadowRadius:5},
		textContainer:{paddingHorizontal:8,paddingBottom:8},
		img:{width:'100%',height:IMG_WIDTH,borderTopLeftRadius:8,borderTopRightRadius:8},
		title:{lineHeight:20},
})