Как использовать переменную состояния в элементе навигации в React Native

Question

Я хотел бы показать / скрыть элемент навигации в соответствии с изменениями состояния в собственном приложении реагировать.Это то, что я сделал.

static navigationOptions = ({ navigation }) => {    
    return {
      headerLeft: <Button this.state.showSaveBtn && title='Save'/>
    }
  }
...
validateForm () {
    if (validate()){
       this.setState({showSaveBtn: true});
    } else {
       this.setState({showSaveBtn: false});
    }
}

Но он не может быть запущен, потому что «this» не относится к текущему компоненту.Я только что показал, как я хотел бы сделать.Важно управлять элементом навигации с помощью переменной состояния.

Спасибо.

Answer 1

Вам нужно установить состояние навигации, а не состояние компонента.Если форма validate() возвращает true, вы можете сделать что-то вроде this.props.navigation.setParams({showSaveBtn: true }), а затем в navigationOptions вам просто нужно сделать что-то вроде этого:

static navigationOptions = ({ navigation }) => {

        const { params } = navigation.state;

        return {
          headerLeft: <Button params.showSaveBtn && title='Save'/>
        }

};

Ps .: не забудьте определить значение по умолчаниюshowSaveBtn параметр навигации в componentWillMount()

Answer 2

Изменить идеи

navigationOptions: {
    header: null
}

Настроить заголовок