uatcomponent/src/container/banner/banner.js

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

//@flow
/**
 * 页面:轮播 created by Mark
*/

import React, { Component } from 'react';
import { View,
         Text,
         TouchableOpacity,
         Image,
         ViewStyle,
         NativeSyntheticEvent,
         ImageLoadEventData,
         StyleSheet,
         Dimensions,
} from 'react-native';
import Swiper from "react-native-swiper";
import { ComponentProps,BannerModel,ScrollDataType} from "../../model";
import { BannerItem } from './view/bannerItem';
import { autoBaseUrl } from 'uatcomponent/src/util';
import { BannerShowType } from 'uatcomponent/src/container/banner/banner.model';



type Props = {
    style:ViewStyle
} & ComponentProps<BannerModel,ScrollDataType[]>;
type State = {
    bundleHeight:Number
};

const BUNDLE_HEIGHT : Number = 50;
export class Banner extends Component <Props,State>{

    /**初始化state*/
    state:State = {
        bundleHeight:BUNDLE_HEIGHT,
    }
    /**图片重置尺寸 */
    resizeFrame = (e:NativeSyntheticEvent<ImageLoadEventData>)=>{
        //图片的实际尺寸
        let realHeight:Number = e.nativeEvent.source.height;
        let realWidth :Number = e.nativeEvent.source.width;
        //图片显示的宽度
        let displayWidth:Number= Dimensions.get('window').width;
				let displayHeight:Number=(realHeight/realWidth)*displayWidth;
				const {data} = this.props;
				
        this.setState({
            bundleHeight : displayHeight 
        })
    }
    /**渲染函数*/
    render(){
        const {data,baseUrl,} = this.props
        if(!data||!data.content)return <View />
				const {bundleHeight} = this.state;
				const {showType} = data.content;
				if(showType == BannerShowType.Scroll){
					return (
						<Swiper 
								 autoplay={true}
								 autoplayTimeout={3}
								 style={{height:bundleHeight}}
								 >
								{
										data.content.dataset.map((item,index)=>{
												return <BannerItem key={`${index}_${item.title}_banner`}
																						data={{...item,pic:autoBaseUrl(baseUrl,item.pic)}} 
																					 onclick={(d)=>{
																							 this.props.onClick && this.props.onClick(data,d)
																					 }}
																					 onImgLoad={this.resizeFrame}/>
										})
								}
						</Swiper>
					)
				}else{
					return (
						<View style={{flex:1}}>
						{
							data.content.dataset.map((item,index)=>{
									return <BannerItem key={`${index}_${item.title}_banner`}
																			data={{...item,pic:autoBaseUrl(baseUrl,item.pic)}} 
																			onclick={(d)=>{
																					this.props.onClick && this.props.onClick(data,d)
																			}}
																			onImgLoad={this.resizeFrame}/>
							})
						}
					</View>
					)
				}
        
    }
}

//样式
const styles = StyleSheet.create({
    
})