Question

我正在使用React Navigation并希望隐藏/显示标题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});
}

Answer 1

我提到的那篇文章没有状态变化。现在不在计算机附近，但我会在名为showHeader: true的构造函数中添加一个状态，并在_handleHide和_handleShow中更改showHeader的状态。

然后从帖子Dynamically hide/show header in react-native：

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

在onPress上隐藏和显示reactnavigation标头

1 个答案: