efunbox-mobile-8/pages/components/TopicTitle.js

/** 
 * @param: 
 *      title: 标题
 *      summary: 标题下的灰字简介
 *      background: 背景色
 *      ifTubeShow: 左侧icon是否显示,默认不显示  boolean
 */

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
} from "react-native";
import Dimensions from '../utils/dimensions'

const styles = StyleSheet.create({
    wrapper: {
        width: Dimensions.width,
        height: 45,
        paddingLeft: 14,
        justifyContent: "center",
        flexDirection: 'column',
        backgroundColor: 'yellow'
    },
    line1: {
        flex: 1,
        alignItems: "center",
        flexDirection: 'row'
    },
    line2: {
        // 123
        flex: 1
    },
    tube: {
        width: 4,
        height: 14,
        marginRight: 6,
        backgroundColor: '#ffd101'
    },
    title: {
        color: '#373737',
        fontSize: 18
    },
    summary: {
        color: '#787878',
        fontSize: 16
    }
})

export default class TopicTitle extends Component {

    render() {
        let line2 = <View></View>;
        if (this.props.summary) {
            line2 = <View style={styles.line2}>
                <Text style={styles.summary}>{this.props.summary}</Text>
            </View>
        }
        let tube = <View></View>;
        if (this.props.ifTubeShow) {
            tube = 1
        }
        return (
            <View style={styles.wrapper}>
                <View style={styles.line1}>
                    <View style={this.props.ifTubeShow ? styles.tube : null}></View>
                    <Text style={styles.title}>{this.props.title}</Text>
                </View>
                {line2}
            </View>

        );
    }
}