使用反应导航显示没有反应组件

Question

我正在尝试在屏幕之间导航。我为此安装了npm react-navigation。我正在尝试从我的AutoCompActivity页面返回到app.js页面。我的AutoCompActivity页面上有以下代码：

import HomeActivity from '../App'

class AutocompActivity extends Component {

  constructor(props) {

    super(props);

    this.state = {

      // Default Value of this State.
      Loading_Activity_Indicator: true,
      text:'',
      selected_topic_id: -1,

    }
    this.arrayholder=[];
  }
 OpenHomePageFunction = () =>
  {
     this.props.navigation.navigate('Home');

  }

 and finally, I have this in my code:

 export default MyNewProject=   StackNavigator(
{

  Home:    {screen:HomeActivity}
}

我收到以下错误：

我的AutoCompActivity.js驻留在名为Module的文件夹中，module驻留在根文件夹中，而app.js驻留在应用程序的根文件夹中。

下面是我的App.js代码：

import React, { Component } from 'react';


import { AppRegistry, StyleSheet, Text, View, Button, Image, TouchableOpacity,Platform } from 'react-native';
import { StackNavigator } from 'react-navigation';
import MissionActivity from './Modules/MissionActivity' ;
import AutoCompActivity from './Modules/AutoCompActivity' ;
import SearchServices  from './Modules/SearchServices';

class MainActivity extends Component {

  constructor(){

    super();

    this.state={

      isVisible : true,

    }

  }

  Hide_Splash_Screen=()=>{

    this.setState({ 
      isVisible : false 

    });

  }

  componentDidMount(){

    var that = this;

    setTimeout(function(){

      that.Hide_Splash_Screen();

    }, 5000);



  }

  static navigationOptions = {
    title: '',
  };



  OpenSecondActivityFunction = () =>
  {
     this.props.navigation.navigate('Mission');

  }

  OpenThirdActivityFunction = () =>
  {
     this.props.navigation.navigate('autoComp');

  }


  OpenSearchSer = () =>
  {
     this.props.navigation.navigate('SearchSer');

  }




  render()
  {
    let Splash_Screen = (

      <View style={styles.SplashScreen_RootView}>

          <View style={styles.SplashScreen_ChildView}>

              {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}

              <Image source={require('./Resources/CAC.png')} 
              style={{width:'100%', height: '100%', resizeMode: 'contain'}} />

          </View>


          <TouchableOpacity 
            activeOpacity = { 0.5 }
            style={styles.TouchableOpacity_Style}
            onPress={this.Hide_Splash_Screen} >

              <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
              style={{width:25, height: 25}} />

          </TouchableOpacity>


      </View> )


     return(
        <View style = { styles.MainContainer }>
           <View style={styles.toolbar}>
              <Image 
                   resizeMode='contain'
                   style={styles.toolbarTitle} 
                  source={require('./Resources/LogoWithDesc.jpg')} />
           </View>
           <View>
            <Image 
             style={styles.title} 
          source={require('./Resources/Pot.png')} />
          </View>

          <View style={styles.searchButton}>
          <Button onPress = { this.OpenSecondActivityFunction } title = 'Mission'/>

         </View>
         <View style={styles.searchButton}>
           <Button onPress = { this.OpenThirdActivityFunction } title = 'Available Services'/>
         </View>

         {
            (this.state.isVisible === true) ? Splash_Screen : null
          }




        </View>


     );
  }
}



export default ActivityProject = StackNavigator(
{
  First: { screen: MainActivity, navigationOptions:{header:null}  },

  Mission: { screen: MissionActivity  },

  SearchSer: { screen: SearchServices  },

  autoComp:{screen: }



});