StackNavigator in react-navigation 安卓标题居左问题

onety码生

发布于 2018-11-21 11:02:28

7840

发布于 2018-11-21 11:02:28

文章被收录于专栏：码生

StackNavigator() 调用的时候第二个参数中如下设置

navigationOptions: {
              headerBackTitle: null,
              headerBackTitleStyle: {
                  color: 'white',
              },
              headerStyle: {
                  backgroundColor: '#647cff',
              },
              headerTitleStyle: {
                  color: 'white',
                  alignSelf: 'center',
              },
              headerTintColor: 'white',
              headerRight: <View style={{width: 40, height: 1,}}/>,
          }

headerBackTitle: null, 屏蔽所有的导航左上角返回标题 headerBackTitleStyle: { color: 'white', }, 左上角返回标题为白色 headerStyle: { backgroundColor: '#647cff', },统一修改导航背景颜色

而安卓导航标题默认是居左的，比较难看

修改方法是 headerTitleStyle: {alignSelf: 'center',},

如此，标题会居中放置

但是，这么设置还是不行，可以看到标题在中间靠右位置。

因为左上角有返回按钮，标题在除了左上角按钮的其余剩余空间居中，而右上角什么都没有，导致靠右

最简单的做法就是，右上角放置占位视图

headerRight: <View style={{width: 40, height: 1,}}/>,

默认宽度 40，40和左上角按钮宽度大致一样

就可以使标题完美居中

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.01.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度