react native Navigator.NavigationBar Title 水平居中问题

相关js源码地址

node_modules\react-native\Libraries\CustomComponents\Navigator\
NavigatorNavigationBar.js

Paste_Image.png

有个navigationStyles属性 跟踪在android下指向的是

node_modules\react-native\Libraries\CustomComponents\Navigator\NavigatorNavigationBarStylesAndroid.js

修改如下

Paste_Image.png

var BASE_STYLES = {
  Title: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    /*alignItems: 'flex-center',*/
    alignItems: 'center',
    height: NAV_ELEMENT_HEIGHT,
    backgroundColor: '#ff004e',
    /*marginLeft: TITLE_LEFT,*/
    marginLeft: 0,
    paddingHorizontal : TITLE_LEFT,

  },

使用示例

render() {
        return (
            }
            >
        );
    }

    ...

    const styles = StyleSheet.create({
    /*高度不要设置 Navigator\NavigatorNavigationBar.js 中的navigationStyles NavigatorNavigationBarStylesAndroid已默认定义了，56*/
        navContainerRoot: {
            backgroundColor: '#81c04d',
            alignItems: 'center',
            justifyContent: 'center',
        },