在 react-native 中动态隐藏/显示标题答案

【问题标题】：Dynamically hide/show header in react-native在 react-native 中动态隐藏/显示标题
【发布时间】：2017-06-27 09:31:00
【问题描述】：

我使用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

【解决方案1】：

搞定了：

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

我正在做这样的事情：

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

关于状态变化；

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

【讨论】：

@kaya null 隐藏标题。没事儿。我得到的是标题如何在动态设置未定义时重置为原始值。
我在文档中没有找到它，但我可以说未定义意味着未定义，因此它会重置值。
@kaya 是的，这是可能的。

【解决方案2】：

根据docs，将header设置为null会隐藏标题。就这样吧

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

【讨论】：

用 null 隐藏它很容易，但 'whatever-you-want' 的值应该是什么
你说你想动态隐藏或显示标题组件对吧？无论你想要什么都应该替换为反应元素或功能。 reactnavigation.org/docs/navigators/stack#header 你想显示为标题
这里的 header 不是单独的 react 元素，header 是 react-navigation 库的一部分。