反应导航 goBack() 并在上一个屏幕中更新

Question

我有两个屏幕。每个屏幕包含三个子类。是的，我正在使用每个屏幕的选项卡。 在我的第一个屏幕上说。 Main-screen 有 -> ScreenA, ScreenB, ScreenC。而我的DetailScreen 有 -> ScreenD, ScreenE, ScreenF

现在从我的ScreenA 我必须推送到ScreenD。代码在这里：

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

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

在我的ScreenD 中，我只有一个按钮可以返回。并更新我的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 D回来时更新我的​​screen A

我的主屏幕：

 <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) }/>

DetailScreen：

 <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) 转到项目中的 package.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 属性。你可以阅读更多here

希望对你有帮助。