在本机导航上隐藏和显示导航标题

时间:2021-02-04 10:48:47

标签: reactjs react-native react-navigation

我想在点击图标时隐藏导航标题,下面的代码隐藏了标题,但在按下搜索返回按钮时不恢复它....

代码如下:

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();
};  

我能做什么?

谢谢

2 个答案:

答案 0 :(得分:1)

post 回答了您的问题。 您做对了,您现在只需要添加条件表达式以仅在 navigation.state.params.header 与 undefined 不同时返回标头。

答案 1 :(得分:0)

为了让它再次可见,我解决了将“未定义”设置为标题...