uatcomponent/src/container/window/window.js

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

//@flow
/**
 * 页面:橱窗 created by Mark
*/

import React, { Component } from 'react';
import { View,
         Text,
         TouchableOpacity,
         Image,
         ViewStyle,
         Dimensions,
         StyleSheet,
} from 'react-native';
import { ComponentProps,ScrollDataType,WindowModel } from "../../model";
import { autoBaseUrl } from 'uatcomponent/src/util';
type Props = {
    style:ViewStyle
} & ComponentProps<WindowModel,ScrollDataType>;
type State = {
    imgHeight : Number,

};

const DEFAULT_IMG_HEIGHT : Number = 100;

export class Window extends Component <Props,State>{

    /**初始化state*/
    state:State = {
        imgHeight : DEFAULT_IMG_HEIGHT,
    }
    resizeFrame = (e:NativeSyntheticEvent<ImageLoadEventData>,displayWidth:Number)=>{
        //图片的实际尺寸
        let realHeight:Number = e.nativeEvent.source.height;
        let realWidth :Number = e.nativeEvent.source.width;
        
        let displayHeight:Number=(realHeight/realWidth)*displayWidth;
        this.setState({
            imgHeight : displayHeight,
        })
    }
    /**渲染函数*/
    render(){
        const {content,} = this.props.data;
        const {imgHeight} = this.state;
        const itemWidth :Number = Dimensions.get('window').width/2;
        return (
             <View style={[styles.container,{height:imgHeight}]}>
								 <TouchableOpacity 
								 		onPress={()=>{
											 this.props.onClick && this.props.onClick(this.props.data,content.dataset[0])
										 }}
								 		style={styles.bigImgContainer}>
                    <Image source={{uri:autoBaseUrl(this.props.baseUrl,content.dataset[0].pic)}} 
                           style={styles.img}
                           onLoad={(e)=>{this.resizeFrame(e,itemWidth)}}/>
                 </TouchableOpacity>
                 <View style={styles.bigImgContainer}>
										 <TouchableOpacity 
										 		 onPress={()=>{
													this.props.onClick && this.props.onClick(this.props.data,content.dataset[1])
												}}
										 		 style={styles.smallImgContainer}>
                         <Image source={{uri:autoBaseUrl(this.props.baseUrl,content.dataset[1].pic)}} style={styles.img}/>
                     </TouchableOpacity>
										 <TouchableOpacity 
										 		 onPress={()=>{
													this.props.onClick && this.props.onClick(this.props.data,content.dataset[2])
												}}
										 		 style={styles.smallImgContainer}>
                         <Image source={{uri:autoBaseUrl(this.props.baseUrl,content.dataset[2].pic)}} style={styles.img}/>
                     </TouchableOpacity>
                 </View>
             </View>
         )
    }
}

//样式
const styles = StyleSheet.create({
    container:{flexDirection:'row'},
    bigImgContainer:{flex:1,height:'100%'},
    img:{width:'100%',height:'100%'},
    smallImgContainer:{flex:1},
})