很少写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
})
}
折腾了好一会才实现,继续发现坑填坑