MessageDetail.js 2.36 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    Component,
} = React;

const {
    View,
    Text,
    StyleSheet,
} = ReactNative;

export default class MessageDetail extends Component {

    static propTypes = {
            title: React.PropTypes.string,
            time: React.PropTypes.string,
            content: React.PropTypes.string,
    };

    constructor(props) {
        super(props);

    }

    renderName() {
        return (
            <Text style={{color: '#444444', fontSize: 13, marginLeft: 15, marginBottom: 6,}}>尊敬的用户:</Text>
        );
    }

	render() {
        return (
             <View style={styles.container}>
                <View style={styles.message}>
                    <View style={styles.row_top}>
                        <Text style={styles.title}>{this.props.title}</Text>
                    </View>
                    <View style={styles.line}/>
                    {this.props.hasHead ? this.renderName() : null}
                    <Text style={styles.subtitle}>{this.props.content}</Text>
                    <Text style={styles.company}>Yoho!buy有货</Text>
                    <Text style={styles.time}>{this.props.time}</Text>
                </View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
    },
    message: {
        backgroundColor: 'white',
    },
    title: {
        flex: 1,
        color: '#444444',
        fontSize: 20,
        marginLeft: 10,
        marginRight: 18,
    },
    row_top: {
        flexDirection: 'row',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    subtitle: {
        fontSize: 13,
        marginLeft: 15,
        color: '#444444',
        marginRight: 18,
    },
    column: {
        flexDirection: 'column',
        height: 100,

        backgroundColor: 'white',
    },
    line: {
        height: 1,
        backgroundColor: '#B0B0B0',
        marginLeft: 15,
        marginBottom: 15,
     },
    company: {
        fontSize: 12,
        alignSelf: 'flex-end',
        marginTop: 15,
        marginRight: 15,
        color: '#B0B0B0',
    },
    time: {
        fontSize: 12,
        alignSelf: 'flex-end',
        marginTop: 2,
        marginRight: 15,
        marginBottom: 15,
        color: '#B0B0B0',
    },
});