javascript - react 导航 goBack() 并在上一个屏幕中更新

Question

我有两个屏幕。每个屏幕包含三个子类。是的，我正在使用每个屏幕的选项卡。 在我的第一个屏幕上说。 主屏幕 有 -> 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