uatcomponent/src/container/imgNav/imgNav.js

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

//@flow
/**
 * 页面:图片导航
 *  created by Mark
*/

import React, { Component } from 'react';
import { View,
         Text,
         TouchableOpacity,
         Image,
         ViewStyle,
         Dimensions,
         StyleSheet,
} from 'react-native';
import { ComponentProps,ImgNavModel,ImgNavDataProps } from "../../model";
import { ImgNavItem } from './view/imgNavItem';
import { autoBaseUrl } from 'uatcomponent/src/util';

type Props = {
    style:ViewStyle
} & ComponentProps<ImgNavModel,ImgNavDataProps>;
type State = {
    imgHeight : Number
};

//每一行最多显示个数
const MAX_ITEM_COUNT : Number = 6;
//默认高度
const DEFAULT_HEIGHT : Number = 50;

export class ImgNav extends Component <Props,State>{

    /**初始化state*/
    state:State = {
        imgHeight : DEFAULT_HEIGHT,
    }

    /**点击每一行 */
    onClickItem = (d:ImgNavDataProps)=>{
			// alert('hello')
        this.props.onClick && this.props.onClick(this.props.data,d)
    }
    /**图片重置尺寸 */
    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 {data,baseUrl,} = this.props;
        const count :Number = data.content.dataset.length>6?6:data.content.dataset.length;
        const itemWidth : Number = Dimensions.get('window').width / count;
        const {imgHeight} = this.state;
        return (
             <View style={styles.container}>
                 {
                     data.content.dataset.map((item,index)=>{
												 return <ImgNavItem key={`imgNav_${item.link}_${index}`}
												 										data={{...item,pic:autoBaseUrl(baseUrl,item.pic)}} 
                                            style={{width:itemWidth,height:imgHeight}}
                                            onclick={this.onClickItem}
                                            onImgLoad={(e)=>this.resizeFrame(e,itemWidth)}/>
                     })
                 }
             </View>
         )
    }
}

//样式
const styles = StyleSheet.create({
    container:{flexDirection:'row'}
})