MessageCell.js 2.03 KB
'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';



export default class MessageCell extends Component {

    constructor(props) {
        super(props);

    }


    render() {
        let {data, rowID} = this.props;

        return (
            <TouchableOpacity 
                onPress={() => {
                    this.props.onPressListItem && this.props.onPressListItem(data);
                }}
            >
                <View style={styles.rowContainer}>
                    <Image style={styles.icon} source={require('../../../common/images/tag/tip_hot.png')}/>
                    <View style={styles.right}>
                        <Text style={styles.title}>{data.get('title')}</Text>
                        <Text style={styles.detail} numberOfLines={1}>{data.get('detail')}</Text>
                    </View>
                    <Text style={styles.count}>10</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {

    },
    rowContainer: {
        flexDirection: 'row',
        marginTop: 10,
        marginBottom: 10,
    },
    icon: {
        width: 35,
        height: 35,
        borderRadius: 3,
        marginLeft: 10,
    },
    right: {
        marginLeft: 10,
        justifyContent: 'center',
    },
    title: {
        color: '#444444',
        fontSize: 16,
        fontWeight: 'bold',
        marginTop: 2,
    },
    detail: {
        color: '#b0b0b0',
        fontSize: 12,
        marginTop: 2,
    },
    count: {
        position: 'absolute',
        top: -8.5,
        left: 38,
        width: 17,
        height: 17,
        borderRadius: 17 / 2,
        textAlign: 'center',
        paddingTop: 1.5,
        color: 'white',
        fontSize: 12,
        backgroundColor: 'red',
    }
});