Скрыть / показать кнопку на панели инструментов React Native

Я пытаюсь скрыть / показать кнопку в заголовке панели инструментов React Native. Я хотел бы, чтобы кнопки отображались после входа пользователя в систему. Я получаю сообщение об ошибке: undefined не является объектом в this.state.status. Как я могу получить состояние на панели инструментов?

export default class TestSC extends React.Component {
  constructor(){
    super();

    this.state  = {
      status:false
    }
  }


  static navigationOptions = ({navigation})=> {
    return {
    title: 'Tin Tin Foil',
     headerRight: ( 
      <View style = {styles.twoButtonView}>
         {(this.state.status == true) ?  
          <TouchableOpacity onPress = {this._refreshButtonPress}>
            <Image source = {require('../img/ic_search_white.png')} style = {styles.refrgeshButton}  />
          </TouchableOpacity>
        : null} 
        <Button
          onPress = {() => navigation.navigate('Login')}
          title = "Login" color = "#fff" />
      </View>
    ),
  }};

  toggleStatus(){
    this.setState({
      status:!this.state.status
    });
    console.info('toggleStatus: '+ this.state.status);
  }

  render() {
    return (
      <View style = {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Test</Text>

          <TouchableHighlight onPress = {()=>this.toggleStatus()}>
            <Text> Click Me Toggle </Text>
          </TouchableHighlight>
      </View>
    );
  }
  }

javascript react-native

11.03.2018 10:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

543

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого можно использовать navigation params.

При настройке состояния компонента вам также необходимо установить параметры навигатора.

this.props.navigation.setParams({
    status: true
})

И используйте параметры навигатора в шапке.

navigation.state.params.status == true

Полный пример

export default class TestSC extends React.Component {
  constructor() {
    super();

    this.state = {
      status: false
    }
  }

  static navigationOptions = ({navigation, screenProps}) => {  
    if (!navigation.state.params) {
      navigation.state.params = {}
    }
    return {
      title: 'Tin Tin Foil',
      headerRight: ( 
        <View style = {styles.twoButtonView}>
          {(navigation.state.params.status == true) ?  
            <TouchableOpacity onPress = {this._refreshButtonPress}>
              <Text>Login</Text>
            </TouchableOpacity>
          : null}
        </View>
      ),
    }
  };

  toggleStatus() {
    this.setState(pre => {
      pre.status = !pre.status
      this.props.navigation.setParams({
        status: pre.status
      })
      return pre
    })

    console.info('toggleStatus: ' + this.state.status);
  }

  render() {
    return (
      <View style = {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Test</Text>

          <TouchableHighlight onPress = {()=>this.toggleStatus()}>
            <Text> Click Me Toggle </Text>
          </TouchableHighlight>
      </View>
    );
  }
}

Спасибо. Я новичок в React Native и какое-то время борюсь с этой проблемой. Я изменил строку условия на «{(navigation.state.params! = Null && navigation.state.params.status == true)?» Я думаю, что params был пустым при первой загрузке страницы.

— 11.03.2018 12:38

11.03.2018 11:41