未定义（评估'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

尝试使用 createSwitchNavigator 代替 createStackNavigator 时出现问题，但是如果您克隆此https://github.com/expo/new-project-template博览会演示模板并开始，它将不会更好地堆叠交换机正在解决该问题，因为此博览会模板没有问题。

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

Answer 2

您在堆栈导航器和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组件