React Native （RN）标题栏封装

       小弟在开发android的时候，对于自带的标题栏有深刻的印象，一个字，丑，我压根就看不上，丑就算了，改动性还很低，也就放出一些小改动的方法，然而，这并不能满足那些屌炸天的产品的需求，所以需要丢弃自带的标题栏，通过其他途径，去整一个。话说，其实自己封装的才是最好的，为什么这么说呢？

        因为，自己去封装，你想让它方，它还能圆？自己去封装的话，考虑要全面，复用性要强，拓展性也要强，维护起来比较容易。这个时候，你或许也会有这样的体会，别人封装的，或者第三方的，局限性都是有的，这个时候，就不满足你的需求了，这应该就是传说中的契约编程吧，遵守规定的规则去使用，还是很愉快的。

     总结，当你遇到一些变态的需求，之前封装的不满足的情况，这个时候，就需要自己去设定规则，去封装了。不知不觉扯这么多。。。

图1

       好了，今天的主题是 封装标题栏，对于辩题蓝，普通的，简单粗暴的，最让人容易接受的标题页面，应该是分左、中、右，左边的一般是返回按钮，中间是标题文字，右边是页面拓展用的，比如跳其他页面。

封装标题栏，适用大多数需求，对于左边的图片，我设置的是默认的返回图标，但也可以替换其他的，下面是我所提供的一些需要传递的属性和方法参考：

属性：
isshowLeftBackIcon：是否需要显示左边的图片
leftImage：左边的图片（默认是返回键的图标）
isChange:是否替换左边的图片
centerText：中间的标题
rightText：右边的文字
rightImage：右边的图片
backgroundColor：标题栏的背景色（不传的话，默认背景）

方法：
leftPress：左边的点击事件（不传的话，默认是返回是上个页面）
rightpress：右边的点击事件(不传的话，无响应，无默认)

接下来是处理标题左部分代码：

//默认展示
//_pressBackButton 是默认的左边点击事件

图1：处理标题左边

如图1：左边的返回按钮是可以控制显示与否，点击事件，如果没有传递，那就是默认的点击事件，图片显示，如果没有传递要显示的图片，默认显示返回键图片。

图2：右边文字

图2：这是右边文字相关，如果没传rightpress，那就是null，无影响。

图3：右边图片

图3：右边图片相关代码，如果rightImage为null，那就无右边图片。

图4

图4：适配了ios，据我所知，要有20的距离，相当于状态栏的高度吧，不设置，会与状态栏重叠，这是整个标题栏的组合。

到这里，就结束了，好吧，我在把样式也贴出来吧。

样式：
conststyles = StyleSheet.create({
  containerText: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
     height: 44,
},
leftImage: {
width: 44,
height: 44,
},
rightImage: {
width: 30,
height: 30,
},
titleText: {
fontSize: 18,
color: Dimens.color_text_33,
},
rightTxt: {
fontSize: 15,
color: Dimens.color_text_33,
},
rightGreyTxt: {
fontSize: 15,
color: Dimens.color_text_99,
},
TouchableOpacityLeftText: {
position: 'absolute',
left: 0,
top: 8,
bottom: 8,
justifyContent: 'center',
},
TouchableOpacityRightText: {
position: 'absolute',
right: 15,
top: 8,
bottom: 8,
justifyContent: 'center',
},
TouchableOpacityRightImgview: {
position: 'absolute',
right: 0,
top: 8,
bottom: 8,
justifyContent: 'center',
}

好了，到这里就结束了，来看下效果图：

左边图片存在

左右两边都没有

右边文字存在

以上是效果图，还有的没截出来，大家自己去尝试吧，就到这。

      认真看的朋友肯定能按照上面的实现出来，自己动手丰衣足食，也希望广大程序员改掉粘贴复制的习惯，快速成长起来。
      之后会把文件的下载地址发出来~

      代码地址：https://github.com/niyige/justCoder/blob/master/src/view/titleBar.js