MessageListCellFooter.js 2.08 KB
'use strict';

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

export default class MessageListCellFooter extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {itemData} = this.props;
        return(
            <TouchableOpacity
                onPress={() => {
                        this.props.onPressListItem && this.props.onPressListItem(itemData)
                    }
                }
            >
                <View style={styles.container}>
                    <View style={styles.topSeparator} />
                    <View style={styles.textContainer}>
                        <Text style={styles.textStyle}>
                            查看详情
                        </Text>
                        <Image
                            source={require('../../images/message_indicator_arrow.png')}
                            style={styles.iconStyle}
                        />
                    </View>
                    <View style={styles.bottomSeparator} />
                </View>
            </TouchableOpacity>
        )
    }
}

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

let styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        height: 44,
        width
    },
    topSeparator: {
        marginLeft: 15,
        height: 0.5,
        width: width-15,
        backgroundColor: '#e0e0e0'
    },
    bottomSeparator: {
        width,
        height: 1,
        backgroundColor: '#e0e0e0'
    },
    textContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 43,
        width,
        backgroundColor: 'white',
        alignItems: 'center'
    },
    textStyle: {
        marginLeft: 15,
        color: '#444444',
        backgroundColor: 'transparent',
        textAlign: 'left',
        fontSize: 14,
        fontWeight: 'bold'
    },
    iconStyle: {
        width: 7,
        height: 12,
        marginRight: 15
    }
})