关于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>
   )
}

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

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

1577 学习 · 727 问题

查看课程

相似问题

关于1-9 Navigationbar的问题

回答 1

关于ListView渲染问题

回答 1

在默认里面设置了 barStyle:

回答 1

createBottomTabNavigator, createStackNavigator,

回答 1

react-navigation中修改导航栏标题的和tabbar如何隐藏的问题

回答 1

打开慕课网App查看更多内容