在反应本机导航上隐藏和显示导航 header

Question

我想在点击图标时隐藏导航 header，下面的代码隐藏了 header 但在按下搜索后退按钮时不恢复它....

代码如下：

static navigationOptions = ({ navigation }) => {
    const {params} = navigation.state;

    return {
            title: 'Chats',
            titleStyle: {
                color: '#ffffff',  
            },
            tintColor: '#ffffff',
            headerTintColor: '#ffffff',
            headerStyle: {
                backgroundColor: "#E6A919"
            },
            header: navigation.state.params ? navigation.state.params.header : undefined, 
            headerTitleStyle: {
                color: '#ffffff'
            }, 
            headerRight: () =>     
                                  <TouchableOpacity
                                    onPress={
                                        () => {
                                            
                                            navigation.setParams({ header: null });
                                            navigation.setParams({ showSearch: true });
                                        }   
                                    }                             
                                  >
                                    <Icon
                                        style={{ width: 24, height: 24, margin: 15, color: '#ffffff', backgroundColor: 'transparent'}}
                                        name={"search"}
                                    />
                                  </TouchableOpacity>
    }        
}

onBackPressed = () => {
    console.log("Back pressed!");
    
    this.props.navigation.setParams({ showSearch: false });
    this.props.navigation.setParams({ header: true });
    this.resetSearchText();
};

我能做什么？

谢谢

Answer 1

这 post 回答了您的问题。您做对了，仅当 navigation.state.params.header 与 undefined 不同时，您现在只需要将条件表达式添加到 return 和 header。

Answer 2

为了让它再次可见，我解决了将 'undefined' 设置为 header...

在反应本机导航上隐藏和显示导航 header

Hide and show navigation header on react native navigation

reactjs

react-native

react-navigation