反应导航标头不隐藏/显示



我正在使用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} />,
});

相关内容

  • 没有找到相关文章

最新更新