Динамический правый компонент в навигации React

Question

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

Что я пробовал:

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={this.state.canContinue}
            />
    };

};

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={this.canContinue()}
            />
    };
};
constructor(props){
    super(props);
    this.canContinue = this.canContinue.bind(this);
}
canContinue(){
//just for testing
return true;
}

Это сбрасывает мне ошибку, что это не определено. Кто-то из вас бросил вызов тому же самому и получил хорошее решение для этого?

Ура! * * 1013

Answer 1

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

static navigationOptions = ({navigation}) => {
    return {
        headerTitle: "Pick images",
        headerRight:
            <Button
                title={"next"}
                type={"clear"}
                onPress={() => {navigation.navigate('Route')}}
                disabled={navigation.state.params?navigation.state.params.canContinue():false}
            />
    };
};

componentDidMount() {
  // set handler method with setParams
  this.props.navigation.setParams({ 
    canContinue: this.canContinue.bind(this),
  });
}