react-native titleBar

import React, {Component} from 'react';import {    Image,    StyleSheet,    Text,    View,    Dimensions,    TouchableOpacity} from 'react-native';import PropType from "prop-types";/** * Created by yunpeng on * Desc: */export default class TitleBar extends Component {    constructor(props) {        super(props)    }    //设置参数类型    static propTypes = {        //左边按钮,不设置就不显示        leftIco: PropType.PropTypes.number,        //右边按钮        rightIco: PropType.PropTypes.number,        //右边标题        rightTitle: PropType.PropTypes.string,        //中间标题        titleText: PropType.PropTypes.string,        //左边点击事件        leftIcoPress: PropType.PropTypes.func,        //右边点击事件        rightIcoPress: PropType.PropTypes.func,        //传入navigation用于返回事件        navigation:PropType.PropTypes.object,    };    static defaultProps = {        titleText: "这是标题",    };    render() {        return (            <View style={style.contentStyle}>                <View >                    {this._renderLeft()}                </View>                    <Text                        //设置文本缩略格式 tail clip                        ellipsizeMode="tail"                        //文本行数限制                        numberOfLines={1}                        style={style.centerTitleStyle} onPress={() => {                    }}>{this.props.titleText}</Text>                <View >                    {this._returnRight()}                </View>            </View>        )    }    /**     * 左边返回按钮     * @returns {XML}     * @private     */    _renderLeft(){        if(!this.props.leftIco){        } else if(this.props.navigation){            return(                <ImageButton                    style={style.imageStyle}                    source={this.props.leftIco}                    onPress={()=>this.props.navigation.goBack()}                />            )        }else if(this.props.leftIcoPress) {            return(                <ImageButton                    style={style.imageStyle}                    source={this.props.leftIco}                    onPress={this.props.leftIcoPress}                />            )        }    }    /**     * 返回右边按钮     * @returns {XML}     * @private     */    _returnRight() {        if (this.props.rightIco) {            return <Image style={style.imageStyle} source={this.props.rightIco} onPress={this.props.rightIcoPress}/>;        } else if (this.props.rightTitle) {            return <Text                //设置文本缩略格式 tail clip                ellipsizeMode="tail"                //文本行数限制                numberOfLines={1}                style={style.rightTitleStyle}>{this.props.rightTitle}</Text>        }    }}class ImageButton extends Component {    render() {        return (            <TouchableOpacity activeOpacity={0.9} onPress={this.props.onPress}>                {this._renderImg()}            </TouchableOpacity>        )    }    _renderImg(){        if(this.props.defaultSource){            return (                <Image                    style={this.props.style}                    source={this.props.defaultSource}                >                    <Image                        style={this.props.style}                        source={this.props.source}                    >                        {this.props.children}                    </Image>                </Image>            )        }else {            return (                <Image                    style={this.props.style}                    source={this.props.source}                >                    {this.props.children}                </Image>            )        }    }}const style = StyleSheet.create({    contentStyle: {        backgroundColor: "#fff",        flexDirection: "row",        height: 40,        alignItems: "center",        paddingLeft: 10,        paddingRight: 10,        justifyContent: 'space-between',    },    imageStyle: {        width: 16,        height: 16,    },    centerTitleStyle: {        position:"absolute",        left:Dimensions.get("window").width/4,        right:Dimensions.get("window").width/4,        color: "#000",        textAlign: "center",        textAlignVertical: "center",    },    rightTitleStyle: {        alignSelf: "flex-end",        color: "#000",        textAlignVertical: "center"    }});