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

Question

Я хочу изменить заголовок заголовка моего класса из другого класса, например:

Это второй класс, в котором с помощью кнопки я хочу изменить заголовок в первом классе:

export default class lingua extends React.Component { 
cambiolingua= () =>
{   
const registra = new Registra(); //in this class I want to change title
registra.ChangeTitle('New Title');

this.props.navigation.navigate('Registra')
}

И это первый класс, где мне нужно сменить заголовок:

export default class Registra extends React.Component {
static navigationOptions = ({ navigation }) => {
const {state} = navigation;
return {
  title: `${state.params.title}`,
};
};

 ChangeTitle = (titleText) => {
  const {setParams} = this.props.navigation;
  setParams({ title: titleText })
 }

Но я получаю сообщение об ошибке "undefined не является объектом (оценка '_this.props.navigation')

Как я могу решить?

Answer 1

Прежде всего, ошибка возникает из-за того, что у вас нет реквизита navigation в вашем классе lingua. Это может быть объяснено тем фактом, что lingua не является сценой в stackNavigator (или любым видом навигатора из реагирующей навигации).

Есть 2 решения: 1) Передайте навигационные реквизиты с экрана в стеке до этого компонента. 2) Вы можете использовать компонент высшего порядка withNavigation из react-navigation, чтобы добавить его к lingua

Пример:

import {withNavigation} from 'react-navigation'

class tmp extends React.Component {

  render() {
    const {navigation} = this.props; //with the withNavigation, you have access to the navigation even though it is not a screen

    return <View />
  }
}

export default withNavigation(tmp);

Лучший способ изменить заголовок, чем обновлять навигационные опции, как вы делаете, это перейти к Registra, напрямую отправив желаемый заголовок:

// In lingua
this.props.navigation.navigate('Registra', {title: 'You custom title'})

Для этого вам не нужно вызывать метод в Registra для обновления заголовка

Надеюсь, это поможет!