uatcomponent/src/container/recommendCategory/view/categoryItem.js

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

/**
* 备注：分类项
* create by Mark at 2019-July
*/
import React, { Component } from 'react';
import { 
		View,
		Text,
		Image,
		TouchableOpacity,
		StyleSheet,
		ViewStyle,
		NativeSyntheticEvent,
		ImageLoadEventData,
} from 'react-native';
import { RecommendItem,RecommendItemProps } from "../../../model";
type Props = {
		style : ViewStyle,
		data  : RecommendItem,
		onClick:(data:RecommendItemProps)=>{},
};
type State = {
	imgHeight : Number,
};

export class CategoryItem extends Component <Props,State>{
		static defaultProps :Props = {
		}
		state:State={
			imgHeight : 40,
		}
		imgLoad = (e:NativeSyntheticEvent<ImageLoadEventData>)=>{
			this.setState({imgHeight:e.nativeEvent.source.height});
		}
		render(){
				const {style,data,onClick} = this.props;
				const {imgHeight} = this.state;
				return (
						<TouchableOpacity 
								onPress={()=>{
									this.props.onClick && this.props.onClick(data)
								}}
								style={[styles.container,style]}>
								<Image source={{uri:data.pic}} 
											 onLoad={this.imgLoad}
											 style={[styles.img,{height:imgHeight}]} />
								<Text style={styles.txt}>{data._title}</Text>
						</TouchableOpacity>
				)
		}
}

const styles = StyleSheet.create({
		container:{alignItems:'center',justifyContent:'center'},
		img:{width:'100%',backgroundColor: 'white',},
		txt:{color:'gray',height:20},
})