Реагировать на навигацию goBack () и обновление на предыдущем экране

Question

У меня два экрана. Каждый экран содержит три дочерних класса. Да, я использую вкладку каждого экрана. Скажем так, на моем первом экране. Main-screen имеет -> ScreenA, ScreenB, ScreenC. И мой DetailScreen имеет -> ScreenD, ScreenE, ScreenF

Теперь с моего ScreenA у меня pu sh до go до ScreenD. Код здесь:

  this.props.navigation.navigate('DetailScreen', {
            onNavigateBack: this.refresh.bind(this)
   })

 refresh(commentText) {
        alert('alert me')
    }

В моем ScreenD у меня есть одна кнопка go назад. И обновите значения в моем ScreenA:

 this.props.navigation.state.params.onNavigateBack(this.state.commentText); 
 this.props.navigation.goBack();

Но всегда я получаю ошибку, например:

Undefined is not an object (evaluating 'this.props.navigation.state')

Любая помощь была бы замечательной. Моя цель - обновить свой screen A, когда я вернусь с screen D

Мой главный экран:

 <ScreenA navigation={this.props.navigation}  tabLabel= "ScreenA" props = {this.props} tabView={this.tabView}/>
 <ScreenB navigation={this.props.navigation}  tabLabel= "ScreenB" props = {this.props} tabView={this.tabView}/>
<ScreenC navigation={this.props.navigation}   tabLabel= "ScreenC" props = {this.props} tabView={this.tabView} goToPage={ () => this.goToPage(2) }/>

Подробный экран:

 <ScreenD navigation={this.props.navigation}  tabLabel= "ScreenD" props = {this.props} tabView={this.tabView}/>
 <ScreenE navigation={this.props.navigation}  tabLabel= "ScreenE" props = {this.props} tabView={this.tabView}/>
<ScreenF navigation={this.props.navigation}   tabLabel= "ScreenF” props = {this.props} tabView={this.tabView} goToPage={ () => this.goToPage(2) }/>

Мой RootStackScreen:

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';

import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const RootStack = createStackNavigator();


const RootStackScreen = ({navigation}) => (
    <RootStack.Navigator headerMode='none'>
        <RootStack.Screen name="ScreenA" component={ScreenA}/>
        <RootStack.Screen name="ScreenB" component={ScreenB}/>
    </RootStack.Navigator>
);


export default RootStackScreen;

Answer 1

1) Go в ваш пакет. json файл в вашем проекте.

2) Измените версию @react-navigation/stack на версию 5.x.x.

Пример:

"@react-navigation/stack": "^5.2.14",

3) Запустите npm install.

4) В вашем ScreenA,

this.props.navigation.navigate('DetailScreen', {
  onNavigateBack: (commentText) => this.refresh(commentText)
})

refresh(commentText) {
  alert('alert me')
}

5) В вашем ScreenD,

this.props.route.params.onNavigateBack(this.state.commentText); 
this.props.navigation.goBack();

6) Запустите npm start и перезапустите свой проект.

Вы решите проблему.

Убедитесь, что вы используете @react-navigation/stack: ^5.x.x

Вот рабочий пример ...

https://snack.expo.io/K1Kb_iTEW

Answer 2

Вы пытаетесь получить доступ к опоре навигации внутри дочернего класса. Для этого вам нужно использовать withNavigation Компонент более высокого порядка.

import { withNavigation } from 'react-navigation';
//    <YOUR COMPONENT>
export default withNavigation(YouChildComponent);

Это обеспечивает поддержку navigation для дочерних компонентов. Вы можете прочитать больше здесь

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