在 react-native 中动态隐藏/显示标题 [英] Dynamically hide/show header in react-native

问题描述

我使用 react-navigation 进行路由.我想在一个组件上动态隐藏或显示标题.有什么办法吗?

I am using react-navigation for routing purpose. I want to dynamically hide or show header on one component. Any way to do it?

我像这样动态更改 headerLeft，但找不到任何方法来为整个标题执行此操作.

I change headerLeft dynamically like this but can not find any way to do it for entire header.

static navigationOptions = ({ navigation }) => ({
    headerRight: navigation.state.params ? navigation.state.params.headerRight : null
});

this.props.navigation.setParams({
        headerRight: (
            <View>
                <TouchableOpacity onPress={() => blaa} >
                     <Text>Start</Text>
                </TouchableOpacity>
            </View>
        )
});

我想要这样的东西 - 基于状态隐藏/显示标题:

I want something like this - hide/show header based on state:

this.props.navigation.setParams({
        header: this.state.header
});

推荐答案

搞定了:

不知道为什么会这样，但是将 undefined 传递给 header 将显示默认标头，而 null 将隐藏标头.

Don't know why it is so but passing undefined to header will show default header and null will hide the header.

我正在做这样的事情:

static navigationOptions = ({ navigation }) => ({
    header: navigation.state.params ? navigation.state.params.header : undefined
});

以及状态变化；

this.props.navigation.setParams({ 
        header: null 
});

这篇关于在 react-native 中动态隐藏/显示标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！