Question

如何通过按一个按钮隐藏然后显示标题（堆栈导航器）？

static navigationOptions = ({ navigation }) => {
    return {
        header : null
    }
}

此代码将标头设置为null并隐藏标头，但我无法再次显示它。

Answer 1

您可以尝试这样的事情

static navigationOptions = {
     headerVisible: this.state.headerVisible,
};

然后在构造函数中通过以下方式初始化状态

this.state = {headerVisible: true}

然后在按钮上按您可以通过以下方式更改状态

<Button onPress={() => this.setState({headerVisible: !this.state.headerVisible})} />

Answer 2

您可以尝试吗？

this.state={
     header: null
}
static navigationOptions = {
     header: this.state.header,
};
...
headerfunc(){
 if(this.state.header === null){
   this.setSate({
         header: ""
    });
  }else{
   this.setSate({
         header: null
    });
 }
}
...
<Button onPress={() => this.headerfunc()} />

Answer 3

您可以添加自定义函数来处理标题可见性。

在屏幕组件中创建处理函数，

toggleHeader=()=>{
   let currentVal = this.props.navigation.getParam('isHeaderVisible', true);
   this.props.navigation.setParams({ isHeaderVisible: !currentVal });
}

将此处理函数添加到您的Button

render(){
       ...
       <Button onPress={() => this.toggleHeader()} />
       ...
    }

最后，在屏幕上添加static navigationOptions，

static navigationOptions = ({navigation}) => { 
   let headerVisible = navigation.getParam('isHeaderVisible',true);
   return {
     headerVisible
   }
}

Answer 4

谢谢大家。 headerVisible属性不起作用。

还有一个名为headerMode的属性，它只能在堆栈导航器的配置中使用，并且我们无法在屏幕上更改它：

const StackNaviagtor = createStackNavigator({
        showScreen: {
            screen: MyScreen
        }
    }, {
            headerMode: 'none'
        })

NavigationOption中只有

个header属性有效，我们可以在屏幕中对其进行更改

解决方案是：

import { Header } from "react-navigation";   
static navigationOptions = ({ navigation }) => {
    return {
             header: navigation.getParam('isFullscreen') ? null : (headerProps) => <Header {...headerProps} />
    }

然后：

render() {
    let isFullscreen = this.props.navigation.getParam('isFullscreen');
    return (
         <Button title='Full Screen' onPress={() => { this.props.navigation.setParams({ isFullscreen: !isFullscreen }) }} />
    )

如何在react-native中隐藏和显示堆栈导航器标题？

4 个答案: