在 react-native 中动态 hide/show header

Question

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

我像这样动态地更改 headerLeft，但找不到任何方法来为整个 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>
        )
});

我想要这样的东西 - hide/show header 基于状态：

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

Answer 1

根据 docs，将 header 设置为 null 会隐藏 header。这样做

this.props.navigation.setParams({
  header: this.state.header ? whatever-you-want : null
})

Answer 2

成功了：

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

我正在做这样的事情：

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

以及状态变化；

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

在 react-native 中动态 hide/show header

Dynamically hide/show header in react-native

react-native

react-navigation