React Native 填坑记 ----- react-navigation_标题居中

很少写blog，尤其是技术类的，今天看了下RN已经升级到55了，记得之前用的还是在43版本，新功能就不多说了，自己去看React Nativ官网。刚刚用了下react-navigation，发现很玩，但是也遇到了一些坑，以下是填坑。

1,标题文字设置

react-navigation给出的属性中有一个title属性，在navigationOptions中，直接定义即可，即下面的代码

static navigationOptions = {

title: '自定义Header'

};

除了上面的方式外，还可以使用下面的代码定义标题栏文字，如下

navigationOptions: {

headerTitle : (

< Text > 自定义Header </ Text >

)

}

运行项目后发现，标题栏中的文字并不是居中的，这并不符合我的预期，后查看api，发现可以通过设置headerTitle中的Text样式来实现，代码如下

navigationOptions: {

headerTitle : (

< Text style= {{ flex: 1, textAlign: 'center' } } > 自定义Header </ Text >

),

}

运行后，你会发现这个标题并不是完美的居中，而是有一点偏右，这怎么办呢？经反复调试发现，只要在navigationOptions中设置一个空的view即可，恍然大悟啊，代码如下

navigationOptions: {

headerTitle : (

< Text style= {{ flex: 1, textAlign: 'center' } } > 自定义Header </ Text >

),

headerRight: < View />

}

2,标题栏文字的隐藏

通过查看api你会发现有一个属性

tabBarVisible

通过设置这个属性的true or false 即可实现标题的隐藏与显示，但是实际使用中，有如下方式

navigationOptions: {

tabBarVisible: false,

headerTitle : (

< Text style= {{ flex: 1, textAlign: 'center' } } > 自定义Header </ Text >

),

headerRight: < View />

}

运行后，发现这个并没有什么卵用，标题依旧显示

还可以这么设置，代码如下

static navigationOptions = ({ navigation }) => ({

tabBarVisible: false,

});

运行后，问题依旧，使用了上面两种方式后发现，想要隐藏标题栏文字，需要在标题栏渲染完成后，修改标题栏的属性，才可以实现，代码如下

componentDidMount(){

this. props. navigation. setParams({

tabBarVisible: false

})

}

折腾了好一会才实现，继续发现坑填坑