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
})
}
折腾了好一会才实现，继续发现坑填坑
以上是 React Native 填坑记 ----- react-navigation_标题居中 的全部内容， 来源链接： utcz.com/z/381698.html
