美文网首页ReactNative
StackNavigator in react-navigati

StackNavigator in react-navigati

作者: wangtieshan | 来源:发表于2018-01-13 13:39 被阅读356次

    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和左上角按钮宽度大致一样

    就可以使标题完美居中

    欢迎加入QQ群: 722600238

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

    相关文章

      网友评论

        本文标题:StackNavigator in react-navigati

        本文链接:https://www.haomeiwen.com/subject/dxscoxtx.html