自定义封装(定义标题栏背景渐变颜色,以及左中右文字图标)

react native(自定义封装标题栏)

### 使用适配
```javascript
"use strict";

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
  Text,
  View,
  Image,
  StatusBar,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import {my} from "../../Commons/assets/images/index"
import LinearGradient from "react-native-linear-gradient";
import {width, unitWidth, titleHeight, statusBarHeight} from './AdapterUtil'
import { withNavigation } from 'react-navigation';
import {NavigationBar,Toast} from "teaset"
import observablemessagetime from '../../Mobx/messageTime'
import ShopsCartStore from "../../Mobx/ShoppingCartStore"
import observableOrder from '../../Mobx/ConfirmOrderStore'
import {inject, observer} from "mobx-react";

@inject('rootStore')
@observer
 class TitleBar extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigation: PropTypes.object.isRequired,
    no_back: PropTypes.bool,
    pressLeft: PropTypes.func,
    right_callback: PropTypes.func,
    left: PropTypes.string,
    backgroundColor: PropTypes.string,
    titleColor: PropTypes.string,
    right: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
    ]),
    rightImage: Image.propTypes.source,
    LifeImage: Image.propTypes.source,
    statusBarBgColor: PropTypes.string,
    barStyle: PropTypes.string,
  }

  static defaultProps = {
    title: "",
    no_back: false,
    right_callback: () => {
    },
  }

  back=()=> {
    if (this.props.pressLeft) {
      this.props.pressLeft()
      return
    }
    // this.props.navigation.goBack();
    this.props.rootStore.infostore.updateInfo()
    this.props.navigation.goBack(null)
    if (this.props.endTime){
      observablemessagetime.end();
    }
    if (this.props.params){
      console.log(this.props.params)
      ShopsCartStore.Updata_address(this.props.params.cart_id)
      observableOrder.reSetpayTypeList();
    }
  }

  render() {
    const {backgroundColor, titleColor} = this.props
    return (
        <LinearGradient colors={this.props.background?[this.props.background,this.props.background]:['#0DD9FA','#4787E6']} style={[TitleStyle.titleBar, backgroundColor ? {backgroundColor: backgroundColor} : null]} start={{x: 0, y: 0}} end={{x: 1, y: 0}} >
        <StatusBar
          backgroundColor={this.props.statusBarBgColor || "transparent"}
          barStyle={this.props.barStyle || 'light-content'}
          translucent={true}/>
        <View style={TitleStyle.statusBar}/>

        <View style={TitleStyle.titleBarContent}>
          {this.props.no_back ? (
            <View style={TitleStyle.left}/>
          ) : (
            <TouchableOpacity activeOpacity={1} onPress={()=>this.back()}
                              style={TitleStyle.left}>
              <Image style={TitleStyle.titleLeftImage}
                     source={this.props.LifeImage || my.left_back}/>
              <Text style={TitleStyle.leftText}>{this.props.left?this.props.left:'返回'}</Text>
            </TouchableOpacity>
          )}
          <View style={TitleStyle.middle}>
            <Text numberOfLines={1}
                  style={[TitleStyle.middleTitle, titleColor ? {color: titleColor} : null]}>{this.props.title}</Text>
          </View>
          {this.renderRight()}
        </View>
        </LinearGradient>
    );
  }
  to_href=(url)=>{
    if(url){
      RouteUtils.to(url)
    }else {
      if (this.props.right_callback) {
        this.props.right_callback()
      }
    }
  }
  renderRight() {
    // if (!this.props.right && !this.props.right_icon) {
    //   return <View style={TitleStyle.right}/>
    // }
    // return (
    //   <TouchableOpacity activeOpacity={1} style={TitleStyle.right}
    //                     onPress={() => {
    //                       this.props.right_callback()
    //                     }}>
    //     {typeof this.props.right == 'object' ? (this.props.right) : (
    //       <Text style={TitleStyle.rightText}>{this.props.right}</Text>
    //     )}
    //     {this.props.right_icon ? (
    //       <Image style={TitleStyle.rightImage} source={this.props.right_icon}/>
    //     ) : (null)}
    //   </TouchableOpacity>
    // )
    if (!this.props.right_view && !this.props.right_icon) {
      return <View style={TitleStyle.right}/>
    }
    return (
      <TouchableOpacity activeOpacity={1} style={TitleStyle.right}
                        onPress={() => {
                            this.to_href(this.props.right_url||'')
                        }}>
        {this.props.right_title ?(
          <Text style={TitleStyle.rightText}>{this.props.right_title}</Text>
        ):null}
        {this.props.right_icon ? (
          <Image style={TitleStyle.rightImage} source={this.props.right_icon}/>
        ) : (null)}
      </TouchableOpacity>
    )
  }
}

const TitleStyle = StyleSheet.create({

  titleBar: {
    width: width,
    height: titleHeight,
    // backgroundColor: '#2AAFF0',
  },
  titleBarContent: {
    flexDirection: 'row',
    // height: titleHeight,
    alignItems: 'center',
    width: width,
    justifyContent: 'space-between',
    height: titleHeight - statusBarHeight,
  },
  titleBarSearchContent: {
    flexDirection: 'row',
    // height: titleHeight,
    alignItems: 'center',
    width: width,
    height: titleHeight - statusBarHeight,
  },

  searchLeftIcon: {
    width: unitWidth * 30,
    height: unitWidth * 38,
    resizeMode: 'stretch',
    marginLeft: unitWidth * 24,
    marginRight: unitWidth * 15
  },
  searchLeftText: {
    width: unitWidth * 140,
    fontSize: unitWidth * 30,
    color: "#ffffff",
  },

  searchBlock: {
    flexDirection: 'row',
    width: unitWidth * 500,
    height: unitWidth * 60,
    borderRadius: unitWidth * 30,
    backgroundColor: "white",
    alignItems: 'center',
    paddingLeft: unitWidth * 30,
    paddingRight: unitWidth * 30
  },

  searchIcon: {
    width: unitWidth * 40,
    height: unitWidth * 40,
    resizeMode: 'stretch',
    marginRight: unitWidth * 30
  },

  searchBarInput: {
    width: unitWidth * 350,
    height: unitWidth * 60,
    fontSize: unitWidth * 30,
    backgroundColor: 'transparent',
    alignItems: 'center',
    margin: 0,
    padding: 0
  },


  left: {
    width: unitWidth * 180,
    height: titleHeight,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingLeft: unitWidth * 10,
  },
  middle: {
    width: width - unitWidth * 360,
    height: titleHeight,
    justifyContent: 'center',
    alignItems: 'center',
  },
  middleTitle: {
    fontSize: 18,
    color: "white",
    alignItems: 'center',
    justifyContent: 'center'
  },

  right: {
    width: unitWidth * 180,
    height: titleHeight,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingRight: unitWidth * 30,
  },

  leftText: {
    fontSize: unitWidth * 30,
    color: "white",
    alignItems: 'center',
    justifyContent: 'center'
  },

  rightText: {
    fontSize: unitWidth * 30,
    color: "white",
    alignItems: 'center',
    justifyContent: 'center'
  },
  rightImage: {
    width: unitWidth * 40,
    height: unitWidth * 40,
    resizeMode: 'contain',
    marginLeft: unitWidth * 5
  },

  titleLeftImage: {
    width: unitWidth * 50,
    height: unitWidth * 35,
    marginRight: unitWidth * 3,
    resizeMode: 'contain'
  },

  homeTitleIcon: {
    width: unitWidth * 213,
    height: unitWidth * 52,
    resizeMode: 'stretch'
  },
  titleRightImage: {
    width: unitWidth * 65,
    height: unitWidth * 65,
    resizeMode: 'contain'
  },
  statusBar: {
    width: width,
    height: statusBarHeight,
    backgroundColor: 'transparent'
  }
})

export default withNavigation(TitleBar);
```

### 不需要标题栏以及透明状态栏
```html
   <StatusBar
    backgroundColor="transparent"
    barStyle="light-content"
    translucent={true}
    />
```