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

如何通过按下按钮隐藏并显示标题（堆栈导航器）

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

---

此代码将标题设置为

null

并隐藏标题，但我无法再次显示它。

您可以尝试类似的方法

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

在构造函数中，通过

this.state = {headerVisible: true}

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

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

this.state = {headerVisible: true}

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

this.setState（{headervible:！this.state.headervible}）}/>

你能试试这个吗

this.state={
标题：空
}
静态导航选项={
header:this.state.header，
};
...
校长{
if（this.state.header===null）{
这是我的({
标题：“
});
}否则{
这是我的({
标题：空
});
}
}
...
this.headerfunc（）}/>

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

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

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

将此处理程序函数添加到

按钮

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

---

谢谢大家<代码>headervible属性不起作用

还有另一个属性名为

headerMode

，它只在stack navigator的配置中工作，我们无法在屏幕中更改它：

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

只有navigationOption中的

标题

属性有效，我们可以在屏幕中更改它

解决方案是：

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

从“反应导航”导入{Header}；
静态导航选项=（{navigation}）=>{
返回{
标题：navigation.getParam（'isFullscreen'）？null：（headerProps）=>
}

然后：

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

render（）{
让isFullscreen=this.props.navigation.getParam（'isFullscreen'）；
返回(
{this.props.navigation.setParams（{isFullscreen:！isFullscreen}}}/>
)

navigationOptions中的header属性不适用于布尔值。此外，由于静态原因，我们不会访问navigationOptions中的状态。导航选项有一个名为HeadService的属性。您的代码似乎也可以工作。我们可以使用此属性：`header:navigation.getParam（'isFullscreen'）？null:this.header`