Question

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

Answer 1

根据React-Navigation中的文档，

标题

React Element或给定HeaderProps返回React的函数   元素，显示为标题。设置为 null 会隐藏标题。

因此要隐藏标题只需使用

header = null;

现在要显示标题你必须提供一个自定义元素或一个返回元素的函数＆＃39; true＆＃39;

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

或

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

如果您想隐藏并显示默认标题而不是创建自定义标题，

来源：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} />, });

React Navigation Header没有隐藏/显示

1 个答案: