Как я могу скрыть и показать заголовок стека навигатора в реагировать родной?

Question

Как я могу скрыть, а затем показать заголовок (навигатор стека), нажав кнопку?

static navigationOptions = ({ navigation }) => {
    return {
        header : null
    }
}

Этот код устанавливает заголовок на null и скрывает заголовок, но я не могу показать его снова.

Answer 1

Вы можете попробовать что-то вроде этого

static navigationOptions = {
     headerVisible: this.state.headerVisible,
};

И В конструкторе Инициализируйте состояние

this.state = {headerVisible: true}

А на кнопке нажать Вы можете изменить состояние на

<Button onPress={() => this.setState({headerVisible: !this.state.headerVisible})} />

Answer 2

Спасибо за каждого. headerVisible свойство не работает.

Есть еще одно свойство, которое называется headerMode, оно просто работает в конфигурации стекового навигатора, и мы не можем изменить его на нашем экране:

const StackNaviagtor = createStackNavigator({
        showScreen: {
            screen: MyScreen
        }
    }, {
            headerMode: 'none'
        })

только header свойство в Navigation работает, и мы можем изменить его на нашем экране

решение:

import { Header } from "react-navigation";   
static navigationOptions = ({ navigation }) => {
    return {
             header: navigation.getParam('isFullscreen') ? null : (headerProps) => <Header {...headerProps} />
    }

, а затем:

render() {
    let isFullscreen = this.props.navigation.getParam('isFullscreen');
    return (
         <Button title='Full Screen' onPress={() => { this.props.navigation.setParams({ isFullscreen: !isFullscreen }) }} />
    )

Answer 3

Вы можете добавить пользовательскую функцию для обработки видимости заголовка.

Создать функцию-обработчик в вашем компоненте экрана,

toggleHeader=()=>{
   let currentVal = this.props.navigation.getParam('isHeaderVisible', true);
   this.props.navigation.setParams({ isHeaderVisible: !currentVal });
}

Добавить эту функцию-обработчик в ваш Button

render(){
       ...
       <Button onPress={() => this.toggleHeader()} />
       ...
    }

Наконец, добавьте static navigationOptions на вашем экране,

static navigationOptions = ({navigation}) => { 
   let headerVisible = navigation.getParam('isHeaderVisible',true);
   return {
     headerVisible
   }
}

Answer 4

Можете ли вы попробовать это?

this.state={
     header: null
}
static navigationOptions = {
     header: this.state.header,
};
...
headerfunc(){
 if(this.state.header === null){
   this.setSate({
         header: ""
    });
  }else{
   this.setSate({
         header: null
    });
 }
}
...
<Button onPress={() => this.headerfunc()} />