在react-native中动态隐藏/显示标头

问题描述 投票:3回答:2

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

我像这样动态更改headerLeft但无法找到任何方法来为整个标头执行此操作。

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

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

this.props.navigation.setParams({
        header: this.state.header
});
react-native react-navigation
2个回答
15
投票

搞定了:

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

我正在做这样的事情:

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

和国家变化;

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

0
投票

根据文档 ,将header设置为null隐藏标头。 像这样去吧

this.props.navigation.setParams({
  header: this.state.header ? whatever-you-want : null
})
© www.soinside.com 2019 - 2024. All rights reserved.