react-native使用react-navigation动态

（2018-10-31更新）

隐藏和显示header的原理是：
1、当header为undefined时，header显示，当header为null时，header隐藏。
2、通过navigation.setParams可以动态设置navigation.state.params的值。

1、设置header的值与navigation.state.params.header关联

  static navigationOptions = ({ navigation }) => ({
    header: navigation.state.params.header,
  })

2、通过其他情况触发header值的改变（这里简单的使用一个按钮切换）

<Button title='显示或者隐藏header' onPress={() => {
this.props.navigation.setParams({header: this.props.navigation.state.params.header === null ? undefined : null})
}} />

ps：params可能为空，最好判断params是否为空，否则会报错，上诉代码为了简洁，省略了判断。

---

下列方法已被遗弃（2018-10-31更新）

我们知道如果想要隐藏header，方法很简单，只需要设置navigationOptions的header为null即可，如下：

static navigationOptions = {
    header: null
  };

但是如果我们想要动态设置，应该怎么办呢？也就是通过页面的state动态设置隐藏和显示header。因为修饰navigationOptions的是static变量，所以在navigationOptions中是不能使用this.state的，各位可以自行尝试。所以为了达到动态隐藏header的效果，我们则需要“曲线救国”。

---

1. 首先，设置navigationOptions的header为null。

2. 然后，自己写一个header组件，这样就可以通过state去控制自定义header的展示和隐藏了。

下面是一个简单的例子：

import { Button, View, Text, Dimensions} from 'react-native'
const screenWidth = Dimensions.get('window').width;

...//省略部分代码

static navigationOptions = {
    header: null
  };

...//省略部分代码

render() {
  return (<View>
    {
    this.state.showHeader ?
    <View style={{width: screenWidth, height: 50, backgroundColor: '#fff'}} />
      <Text>title</Text>
    <View> : null
    }

    ...//省略部分代码

    <Button 
      title='隐藏或显示header' 
      onPress={() => {this.setState({showHeader: !this.state.showHeader})}}/>
  }
  </View>)

---

欢迎加我微信，拉进群交流哦！

微信二维码