隐藏并显示ReactNavigation标题Onpress



我正在使用React导航,并希望隐藏/显示标题OnsCroll或OnPress。这个伪代码是正确的方法吗?另外,您能否就我需要通过哪些道具进行建议,以及如何通过_handleHide_handleShow功能传递它们?

import React, { Component } from 'react'
import { View, Text, StyleSheet, Button} from 'react-native'
class MyApp extends Component {
    static navigationOptions = {
        title: 'MyTitle'         // this is the header I want to hide/show
    }
    constructor () {
        super(props);
        this.state = {
          showHeader: false
        }
        this._handleHide = this._handleHide.bind(this);
        this._handleShow = this._handleShow.bind(this);
    }
    _handleHide(){
        // how do i code this to hide the header?
    }
    _handleShow(){
        // how do i code this to show the header?
    }
    render(){
        return(
            <View style={styles.container}>
            <Button onPress={this._handleHide} title="Hide Header" />
            <Button onPress={this._handleShow} title="Show Header" />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex: 1, justifyContent: 'center', alignItems: 'center'
    }});
export default MyApp;

非常感谢。

更新1

_handleHide(){
    this.setState({showHeader: false});
}
_handleShow(){
    this.setState({showHeader: true});
}

我提到的那个帖子没有状态更改。现在不在计算机附近,但我会在称为showHeader: true的构造函数中添加一个状态,在_handleHide_handleShow中,更改Showheader的状态。

然后从帖子中动态隐藏/显示标头:

this.props.navigation.setParams({
  header: this.state.showHeader ? whatever-you-want : null
})

相关内容

  • 没有找到相关文章