反应导航 Header 不是 hiding/showing

Question

我正在使用 react navigation。我想隐藏 header onPress 并在另一个函数上显示。我可以隐藏它但不能显示它 again.It 似乎我只能在 header 上执行 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 按钮上的 header。我做错了什么？

请帮忙。

更新 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>
        })  
    }

Answer 1

根据 React-Navigation 中的文档，

header

React Element or a function that given HeaderProps returns a React Element, to display as a header. Setting to null hides header.

因此要隐藏 header 只需使用

header = null;

现在要显示 header 您必须提供自定义元素或函数，其中 returns 元素不是 'true'

header = <View style={{ height:20,backgroundColor:'blue' }} ></View>

或

header = (HeaderProps) => <View style={{ height:20,backgroundColor:'blue' }} ></View>

如果您只想隐藏和显示默认设置 Header 而不是创建自定义设置，

来源：https://github.com/react-community/react-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} />,
});

反应导航 Header 不是 hiding/showing

React Navigation Header not hiding/showing

reactjs

react-native

react-navigation