React Native：undefined不是对象（评估'_this2.props.navigation.navigate'）

Question

I recently started studying React-native and trying react-navigation but keep getting this problem.

undefined is not an object (evaluating'_this2.props.navigation.navigate')

I read almost all of other similar problem answers but I can't solve mine.

I guess it is a problem with index.js code maybe but I just can't fix it by myself..

This is my codes

App.js

import React from 'react';
import {createStackNavigator} from 'react-navigation';
import Logintest from './Logintest';
import Mainpage from './Mainpage';

const Navigation = createStackNavigator({
  LoginScreen : {screen : Logintest},
  MainScreen : {screen : Mainpage}
},{
  initialRouteName: 'LoginScreen'
});

//export default Navigation;
export default class App extends React.Component{
  render(){
    return <Navigation />
  }
};

Login.js

import React, {Component} from 'react';
import {View, Text, StyleSheet, SafeAreaView, StatusBar, TextInput, Keyboard, CheckBox, KeyboardAvoidingView, TouchableWithoutFeedback, TouchableOpacity} from 'react-native';

export default class Login extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        }
    }
    render(){
        return (...
                <TouchableOpacity 
                                style = {styles.btncontainer} onPress = {() => this.props.navigation.navigate('MainScreen')}>
                       <Text style = {styles.btntext}>Login</Text>
                </TouchableOpacity>
...)}

Logintest.js

import React from 'react';
import {View, StyleSheet} from 'react-native';
import Login from './Login';

export default class Logintest extends React.Component{
    render(){
        return(
            <View style = {styles.container}>
                <Login navigation={this.props.navigation}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#52C8BE'
    }
});

Mainpage.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class Mainpage extends React.Component{
    render() {
        return (
          <View>
            <Text>Main page</Text>
          </View>
        );
      }
}

and I got index.js too (for splash screen)

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import Splash from './Splash';
import Logintest from './Logintest';
import {name as appName} from './app.json';

class Index extends Component{
    constructor(props){
        super(props);
        this.state = {currentScreen: 'Splash'};
        setTimeout(()=> {
           this.setState({currentScreen:'Login'})
       }, 2000)
    }
    render(){
        const {currentScreen} = this.state
        let mainScreen = currentScreen === 'Splash' ? <Splash /> : <Logintest />
        return mainScreen
    }
}
AppRegistry.registerComponent(appName, () => Index);

Answer 1

Can you re-arrange like following?

index.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import Splash from './Splash';
import App from './App';
import {name as appName} from './app.json';

class Index extends Component{
    constructor(props){
        super(props);
        this.state = {currentScreen: 'Splash'};
        setTimeout(()=> {
           this.setState({currentScreen:'Login'})
       }, 2000)
    }
    render(){
        const {currentScreen} = this.state
        let mainScreen = currentScreen === 'Splash' ? <Splash /> : <App />
        return mainScreen
    }
}
AppRegistry.registerComponent(appName, () => Index);

App.js

import React from 'react';
import {
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator
} from "react-navigation";
import Logintest from './Logintest';
import Mainpage from './Mainpage';

const Navigation = createStackNavigator({
  LoginScreen : {screen : Logintest},
  MainScreen : {screen : Mainpage}
},{
  initialRouteName: 'LoginScreen'
});

const App = createAppContainer(Navigation);

export default App;

Try this.