react native 之自定义顶部导航栏，实现标题居中可控

本来一直用的都是RN自带的组件react-navigation，但是后面需求有变，需要顶部导航栏目的标题可以自己控制，同一页面的标题根据数据库查出来的内容变化。因此自定义了一个导航栏目，实现需求。

关于RN自带的顶部导航栏以及底部导航栏目，请看我的另一篇博客，地址：
http://blog.csdn.net/ljfphp/article/details/77940284

一、背景

1、根据需求，要求点击列表进入详情页，每个页面的标题都不一样。我们都知道，详情页只有一个，如果按照RN自带的组件，则title是固定的，因此不符合需求。

2、RN自带组件的标题部分是歪的，不是很好看。而我们UI需要的是标题居中，，这部分没办法修改RN自带的标题部分居中，烦恼

3、我们需要的效果：

这部分是列表页，要求点击的时候，显示的标题要和列表的标题一致。

就像下面的：

类似于这种的。所以自己写一个导航栏就势在必行了。

二、导航栏目的代码

1、首先是设置RN自带的组件，隐藏掉顶部导航栏目

static navigationOptions = {tabBarVisible: false, // 隐藏底部导航栏header:null,  //隐藏顶部导航栏};

2、自己写一个导航栏的视图view

 /** 自定义的导航栏* */__daohang(){return(<View style={sscStyle.view_custom}><View style={sscStyle.view_custom_back}><Button  onPress={()=>{this.props.navigation.goBack();}}><Image
                  source={require('./img/jiantou.png')}style={{width:20,height:20,marginLeft:0,marginTop:15,}}></Image></Button></View><View style={sscStyle.view_custom_text_view}><Text style={sscStyle.view_custom_text_view_text}>{this.state.data.list1.device_name}</Text></View></View>);}

解释：
（1）首先是导航栏目的组成部分。后退的箭头+导航标题

（2）箭头部分需要用到goback()函数，来返回上一个页面。这里用的还是RN自带组件的方法。

（3）标题部分是根据服务器传过来的数据this.state.data.list1.device_name，然后展现出来。

3、样式部分代码

 /** 自定义导航栏，实现导航标题跟着设备不同而改变的效果* */view_custom:{width:gScreen.width,height:50,// borderWidth:1,// borderColor:'#f0f',flexDirection:'row',},/** 箭头部分* */view_custom_back:{width:50,height:40,// borderWidth:1,//borderColor:'#f00',marginLeft:15,},/** 文字部分* */view_custom_text_view:{width:200,height:40,// borderWidth:1,// borderColor:'#f00',marginLeft:(gScreen.width-200)/2-50-15,},view_custom_text_view_text:{fontSize:20,color:'#fff',textAlign:'center',lineHeight:40,},

如此即可实现我们的需求。

三、关于RN自带组件的标题不居中问题

这里有个小技巧，就是在导航栏目的右边加一个空按钮。RN的导航栏目标题不居中的原因是因为左边多了个箭头，所以标题只是相对于箭头右边的部分居中。既然如此，我们在右边加个空按钮即可。
大致代码如下：

类似于这边的右边按钮部分。大家自己加上试试，看效果如何。

end