React Native自定义带返回按钮的标题栏组件

今天说的是左中右结构的标题栏，应用中最常见的就是左边一个返回按钮，中间一个标题。发现每次传的图片都显示不出来，就不发图了。

index.js代码部分:

import React, { Component,createClass } from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    } from 'react-native';

import StyleSheet from 'StyleSheet';
export default React.createClass({
    getDefaultProps(){
        return {
            title:"标题",
            showBack:true,//是否显示左侧的返回
            sideWidth:null,
        }
    },
    backBtnFunc(){
        this.props.backFunc ? this.props.backFunc.call(null) : this.props.navigator.pop();
    },
   
    render(){
        return (
            
                
                    
                        {this.props.showBack?
                        
                        :null}
                    
                    {this.props.title.length>10?(this.props.title.substr(0,10)+"..."):this.props.title}
                    
                        {this.props.children}
                    
                
            
        )
    }
})

const styles = StyleSheet.create({
    header:{
        backgroundColor:"#4a9df8",
        height :45,
        flexDirection:"row",
        alignItems:"center"
    },
    width50:{
        width:$w_50
    },
     backImg:{
        width:12,
        height:22,
        marginLeft:15
    },
    headerText:{
        fontSize:18,
        flex:1
    },
    whiteColor:{
        color:"#ffffff"
    },
    textCenter:{
        textAlign:"center"
    },
});

使用方法:

导入组件

import Header from "../../component/Header/index";

使用组件