未定义(计算'this.props.navigation.navigate') React Native

Question

是的，我已经阅读了很多关于这个主题的帖子，但我仍然不能让我的项目工作:在我的App.js中，我有一个有条件的呈现登录屏幕或呈现屏幕。这也是我的AppContainer所在的地方。由我的头中的按钮触发的handleAddSubmit=()=>{}方法给出了未定义的错误。有什么建议吗？

App.js

return(
      <View>
        <AppNav/>
        <Main
          username={this.state.username}
          onLoggedOut={this.LoggedOut}
          />
      </View>
    );

Main.js

import React from 'react';
import { StyleSheet, Text, View, Platform, ScrollView} from 'react-native';
import { Header} from 'react-native-elements';
import IntervalSelector from './HourCards/IntervalSelector'
import HourCard from './HourCards/HourCard'

 export default class Main extends React.Component {
 constructor(props){
 super(props);
}

handleAddSubmit = () =>
{
   this.props.navigation.navigate('ToggleNewHourFile');
}

  render() {
    const {username} = this.props;
    return (
      <View>
      <Header
        centerComponent={{ text: '[ ' + username + ' ]',
          style: { color: '#fff',
          fontFamily: Platform.OS === 'ios' ? 'AppleSDGothicNeo-UltraLight' : 'Roboto',
      fontSize:20 } }}
    backgroundColor='#18153f'
    rightComponent=
    {{
      icon: 'home',
      color: '#fff',
      onPress: this.handleHomeSubmit,
      underlayColor: 'transparent',
    }}
    leftComponent=
    {{
      icon: 'add',
      color: '#fff',
      onPress: this.handleAddSubmit,
      underlayColor: 'transparent',
    }}
    statusBarProps={{barStyle:"light-content", translucent:'true'}}
    />
    <IntervalSelector/>
    <View>
    <ScrollView>
    <HourCard/>
    </ScrollView>
    </View>
  </View>
);
}
}

StackNavigator.js

import {createStackNavigator, createAppContainer} from 'react-navigation';
import Main from '../main/Main';
import ToggleNewHourFile from '../main/HourCards/ToggleNewHourFile';

const StackNavigator = createStackNavigator(
  {
  Main: { screen: Main },
  ToggleNewHourFile: {screen: ToggleNewHourFile},
  }
);

const AppNav = createAppContainer(StackNavigator);

export default AppNav;

ToggleNewHourFile.js

import React from 'react';
import { StyleSheet, Text, View, Platform, TouchableOpacity, Image} from 'react-native';

class ToggleNewHourFile extends React.Component{
  render(){
    return(
      <Text>Hallo</Text>
    )
  }
}
export default ToggleNewHourFile;

Answer 1

您可以在堆栈导航器和App.js中引用Main。App.js中的Main不能访问堆栈导航器，而堆栈导航器正是导致错误的原因。

您可以显式地将导航器作为道具传递给Main，例如：

  navigator;
  ...
  <View>
    <AppNav ref={nav => this.navigator = nav}/>
    <Main
      navigation={this.navigator}
      username={this.state.username}
      onLoggedOut={this.LoggedOut}
      />

或者，您可以重构代码以从App.js中删除Main组件