在上篇文章的基础上,我们只能实现react-navigation的基础功能和效果,要想到达android和ios统一或更好的效果,需要继续学习,
一,ios和android 未实现统一的标题栏效果,ios中title居中,而android则居左显示,查看文档,并没有提供相关的属性,所以需要查看其源码进行修改,在node_modules里面找到react-navigation-src-view目录下
在Header.js中修改如下
351行
title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: 'center'
// Platform.OS === 'android'
// ? 'flex-start'
// : 'center',
},
即可达到自己想要的标题栏文本样式,那么返回键右边的文字怎么去掉的,同样在同级目录下的HeaderBackButton.js 里面第84行
{Platform.OS === 'ios' && title && (
<Text
onLayout={this._onTextLayout}
style={[styles.title, { color: tintColor }]}
numberOfLines={1}
>
{renderTruncated ? truncatedTitle : title}
</Text>
)}
隐掉这段代码即可,然后再重新再关闭react-package,重新react-native run-ios 或android 即可,
二,标题栏右侧按钮点击事件及动态替换
由于标题栏并未依附于组件,或者并没有在组件初始化后render,所以无法拿到this,在设置点击事件时不能像平常一样设置,代码如下:
class demo extends Component {
static navigationOptions = {
header: (state)=>({
right:( <Button title={'hehe'} onPress={state.params.myparams}/>)
})
}
_menuClick=()=> {
alert('haha')
};
componentWillMount() {
this.props.navigation.setParams({myparams:this._menuClick})
}
}
这样就可以设置点击事件,并做相应的逻辑操作了,如果想动态隐藏或显示标题栏,也可以:
class demo extends Component {
static navigationOptions = {
header: ({state}) => ({
visible: !!state.params && state.params.header === 'visible',
title: 'Now you see me',
}),
}
render(){
return(
<Button
title="Toggle Header"
onPress={() => this.props.navigation.setParams({ header: (this.props.navigation.state.params && this.props.navigation.state.params.header === 'visible') ? 'none' : 'visible' })}
/>)
}
}
大致我用到的就上面这些,那么如果通过redux来处理app中的导航状态,并统一管理呢,以及使用dva框架来快速集成两者做到快速开发呢,下篇文章再议。