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

/** 
 * @param: 
 *      title: 标题
 *      summary: 标题下的灰字简介
 *      background: 背景色
 *      tubeColor: 左边小长条背景色
 *      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: 'red'
    },
    title: {
        color: '#373737',
        fontSize: 18
    },
    summary: {
        color: '#787878',
        fontSize: 16
    }
})

export default class TopicTitle extends Component {
    constructor(props) {
        super(props);
    }
    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
        }
        const tubeColor = this.props.tubeColor ? this.props.tubeColor : '#ffd101';
        return (
            <View
                style={{
                    width: Dimensions.width,
                    height: this.props.background ? 45 : 66,
                    paddingLeft: 14,
                    paddingTop: this.props.background ? 0: 20,
                    // justifyContent: "center",
                    flexDirection: 'column',
                    backgroundColor: this.props.background ? this.props.background : '#fff'
                }}>
                <View 
                style={styles.line1}>
                    <View
                        style={this.props.ifTubeShow ? {
                            width: 4,
                            height: 14,
                            marginRight: 6,
                            backgroundColor: tubeColor
                        } : null}></View>
                    <Text style={styles.title}>{this.props.title}</Text>
                </View>
                {line2}
            </View>

        );
    }
}