uatcomponent/src/container/imgNav/view/imgNavItem.js

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

/**
* 备注：图片导航
* create by Mark at 2019-June
*/
import React, { Component } from 'react';
import { 
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    ViewStyle,
    NativeSyntheticEvent,
    ImageLoadEventData,
		Dimensions,
		TouchableWithoutFeedback,
} from 'react-native';
import { ImgNavProps,ImgNavDataProps } from "../../../model";

type Props = {
    style : ViewStyle,
    data : ImgNavDataProps,
    onclick : (d:ImgNavDataProps)=>{},
    onImgLoad : (e:NativeSyntheticEvent<ImageLoadEventData>)=>{},
};
type State = {
    //图片高度
    imgHeight : Number,
};

//默认图片高度
const DEFAULT_IMG_HEIGHT:Number=50;

export class ImgNavItem extends Component <Props,State>{
    static defaultProps :Props = {
    }
    state:State={
        imgHeight : DEFAULT_IMG_HEIGHT,
    }
    /**图片加载完成，重新计算高度 */
    onImgLoad = (e:NativeSyntheticEvent<ImageLoadEventData>)=>{
        this.props.onImgLoad && this.props.onImgLoad(e);
    }
    
    render(){
        const {
            pic,
            link,
        } = this.props.data;
        const {style} = this.props;
        const {imgHeight} = this.state;
        return (
						<TouchableOpacity 
								
								onPress={()=>{
									this.props.onclick && this.props.onclick(this.props.data);
								}}
								style={[style,styles.container]}>
                <Image source={{uri:pic}} 
                       style={[styles.img]}
                       onLoad={this.onImgLoad}/>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    container:{},
    img:{width:'100%',height:'100%'},
})