我正在使用React Navigation。我想隐藏" onpress"标题并显示另一个功能。我能够隐藏它,但不能再显示它。看来我只能在标题上执行1个功能。我的代码是:
import React, { Component } from 'react'
import {
View, Text, Button, Alert,
} from 'react-native'
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
class HeaderTest extends Component {
static navigationOptions = ({navigation}) => ({
header: navigation.state.params ? navigation.state.params.showHeader : null,
title: 'HeaderTest'
});
constructor (props) {
super(props);
this.state = { showHeader: true}
this._handleHide = this._handleHide.bind(this);
this._handleShow = this._handleShow.bind(this);
}
_handleHide(){
this.props.navigation.setParams({
header: null
})
}
_handleShow(){
this.props.navigation.setParams({
header: true
})
}
render(){
return(
<View style={thisStyles.container}>
<Button onPress={this._handleHide} title="Hide Header" />
<Button onPress={this._handleShow} title="Show Header" />
</View>
)
}
}
export default HeaderTest;
我希望能够隐藏并显示按钮ONPRESS上的标头。我在做什么错?
请帮助。
更新1:
_handleHide(){
this.props.navigation.setParams({
header: false
})
}
_handleShow(){
this.props.navigation.setParams({
header : (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
})
}
componentWillMount(){
this.props.navigation.setParams({
header : (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
})
}
根据React-Navigation中的文档,
标题
React元素或给定标头返回React的函数 元素,显示为标头。设置为 null 隐藏标头。
因此,隐藏标头只需使用
header = null;
现在要显示标题U必须提供一个自定义元素或函数,该元素返回元素而不是" true"
header = <View style={{ height:20,backgroundColor:'blue' }} ></View>
或
header = (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>
如果您只想隐藏并显示默认标头,而不是创建自定义标题,
来源:https://github.com/react-community/reeact-navigation/issues/1444
//Import Header from 'react-navigation' and render it back with the headerProps u get
import { Header } from 'react-navigation';
static navigationOptions = () => ({
header: (headerProps) => <Header {... headerProps} />,
});