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

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

navigationOptions: {
              headerBackTitle: null,
              headerBackTitleStyle: {
                  color: 'white',
              },
              headerStyle: {
                  backgroundColor: '#647cff',
              },
              headerTitleStyle: {
                  color: 'white',
                  alignSelf: 'center',
              },
              headerTintColor: 'white',
              headerRight: ,
          }

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

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

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

如此,标题会居中放置

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

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

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

headerRight: ,

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

就可以使标题完美居中

欢迎加入QQ群: 722600238

在这里可以讨论、帮助你解决你遇到的问题

另外我的个人博客也已经上线,以后文章或先更新个人博客

onety的博客

你可能感兴趣的:(StackNavigator in react-navigation 安卓标题 居左 问题)