BrandArticleCell.js 4.02 KB
/*
 * 明星原创--资讯组件
 * create by 陈林 2016.12.13
 */

'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    NativeAppEventEmitter,
    StyleSheet,
} from 'react-native';
import {SlicedImage} from '../../../common/components/SlicedImage';



export default class BrandArticleCell extends Component {

    constructor(props) {
        super(props);
        this._renderTimeAndVisit = this._renderTimeAndVisit.bind(this);

    }

    componentDidMount() {

    }


    //时间和访问次数以及是否喜欢
    _renderTimeAndVisit(time, visit, likeNum, id, isliked){

        let likeicon = isliked ? require("../../images/like_on.png") : require("../../images/like_off.png");

        return (
            <View style={styles.timebar}>
                <Text style={styles.time} numberOfLines={1}>{time}&nbsp;&nbsp;&nbsp;&nbsp;</Text>

                <Text style={styles.time} numberOfLines={1}>{visit}&nbsp;&nbsp;&nbsp;&nbsp;</Text>

                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{
                        this.props.onPressArticleLike && this.props.onPressArticleLike(id, !isliked)
                    }}>
                    <Image style={styles.likeicon} source={likeicon} />

                    <Text style={styles.time} numberOfLines={1}>{likeNum}</Text>
                </TouchableOpacity>


            </View>
        );

    }


    render() {
        let {rowData} = this.props;
        //url跳转地址
        let url = rowData.get('url');
         //id
        let id = rowData.get('id');       
        //标题
        let title = rowData.get('title');
        //图片
        let imgUrl = rowData.get('src').replace('{mode}', 2).replace('{width}', 290).replace('{height}', 386);
        //imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'), 290, 386, 2);
        //let brandIconUrl = SlicedImage.getSlicedUrl(data.get('brand_img', ''), 150, 80, 2);
        //介绍
        let intro = rowData.get('intro');
        //发布时间
        let publishTime = rowData.get('publish_time');
        //访问次数
        let viewsNum = rowData.get('views_num');
        //喜欢信息
        let like = rowData.get('like');
        //是否喜欢
        let isLiked = like.get("isLiked");
        //喜欢人数
        let likeCount = like.get("count");

        return (
            <View style={styles.cellContainer}>

                <TouchableOpacity
                    style={[styles.touchableContainer]}
                    activeOpacity={1}
                    onPress={()=>{
                        this.props.onPressArticle && this.props.onPressArticle(url)
                    }}>

                    <Image style={styles.image} source={{uri:imgUrl}} />

                    <Text style={styles.title}>{title}</Text>

                </TouchableOpacity>

                <Text style={styles.content} numberOfLines={4}>{intro}</Text>

                {this._renderTimeAndVisit(publishTime, viewsNum, likeCount, id, isLiked)}

            
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    cellContainer: {
        width: width,
        backgroundColor: '#ffffff',
    },
    touchableContainer: {
        width: width,
    },
    image: {
        width: width,
        height: width / 1.5,
    },


    title:{
        width: width,
        fontSize: 20,
        fontWeight: 'bold',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop:10,
        paddingBottom:5,
    },
    content:{
        width: width,
        fontSize: 15,
        color: '#999999',
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom:5,
    },
    timebar:{
        width: width,
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom:5,
    },
    time:{
        fontSize: 15,
        color: '#b0b0b0',
    },
    likeicon:{
        width: 20,
        height:20,
    },
});