uatcomponent/src/container/banner/view/bannerItem.js

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

/**
* 备注：
* create by Mark at 2019-June
*/
import React, { Component } from 'react';
import { 
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    NativeSyntheticEvent,
    ImageLoadEventData,
		Dimensions,
		TouchableWithoutFeedback,
} from 'react-native';
import { ScrollDataType } from "../../../model";
type Props = {
    data : ScrollDataType,
    onclick : (data:ScrollDataType)=>{},
    onImgLoad:(source:NativeSyntheticEvent<ImageLoadEventData>)=>{},
};
type State = {
    //图片高度自适应，需要动态修改高度
    imgHeight : Number,
};

const S_WIDTH : Number = Dimensions.get("window").width;
const IMG_HEIGHT_DEFAULT : Number = 50;
export class BannerItem  extends Component <Props,State>{
    static defaultProps :Props = {
    }
    state:State={
        imgHeight : IMG_HEIGHT_DEFAULT,
    }
    //根据获取到图片的实际高度，重新赋值图片高度
    resizeImgFrame = (e:NativeSyntheticEvent<ImageLoadEventData>)=>{
				const {height,width} = e.nativeEvent.source;
				let resetHeight : Number = (height * (S_WIDTH)) / width
				this.setState({imgHeight : resetHeight})
        this.props.onImgLoad && this.props.onImgLoad(e);
    }
    onItemClick = ()=>{
        this.props.onclick && this.props.onclick(this.props.data);
    }
    render(){
        const {
            pic,
            link,
            linkType,
        } = this.props.data;
        const {imgHeight} = this.state;
        return (
            <TouchableWithoutFeedback style={styles.container}
                              onPress={this.onItemClick}>
                <Image source={{uri:pic}} 
                       style={[styles.img,{width:'100%',height:imgHeight}]}
                       onLoad={this.resizeImgFrame}/>
            </TouchableWithoutFeedback>
        )
    }
}

const styles = StyleSheet.create({
    container:{flex:1},
    img:{},
})