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=<
4000
span class="hljs-value">{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