关于NavigationBar标题对齐的问题

来源:1-9 自定义组件NavigationBar-3

hejunbinlan

2017-07-12

从苹果app store中安装项目,在RepositoryDetail页面导航栏中,右侧有两个按钮,分别是分享和收藏按钮。但下载下来的源代码中只有收藏按钮。

我的问题是:当左右两边的按钮不对称时,怎么让标题栏能居中对齐;但当标题栏过长时能显示剩余空间。

我仔细看了一下,这个页面,当标题比较短时,是根据父视图居中对齐的;当内容比较长时,是根据剩余空间居中对齐的。这种效果是怎么做到的。

写回答

1回答

CrazyCodeBoy

2017-07-14

可以参考这个样式:

navBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
},

和右侧的按钮代码:

renderRightButton() {
   return (<View style={{flexDirection: 'row'}}>
           {ViewUtils.getShareButton(()=>{
               var shareApp=share.share_app;
               UShare.share(shareApp.title, shareApp.content,
                   shareApp.imgUrl,shareApp.url,()=>{},()=>{})
           })}
           <TouchableOpacity
               onPress={()=>this.onRightButtonClick()}>
               <Image
                   style={{width: 20, height: 20, marginRight: 10}}
                   source={this.state.favoriteIcon}/>
           </TouchableOpacity>
       </View>
   )
}


0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程