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 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）转到项目中的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

我希望这会有所帮助。

反应导航goBack（）并在上一个屏幕中更新

2 个答案: