React Native: undefined не является объектом (оценка '_this2.props.navigation.navigate')

Question

Я недавно начал изучать React-native и пытался реагировать на навигацию, но продолжаю сталкиваться с этой проблемой.

undefined не является объектом (оценивается как '_this2.props.navigation.navigate')

Я прочитал почти все другие похожие проблемы, но не могу решить свои.

Я думаю, что это проблема с кодом index.js, но я просто не могу исправить этосам ..

Это мои коды

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>
        );
      }
}

и у меня тоже есть index.js (для заставки)

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

Можете ли вы изменить порядок следующим образом?

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;

Попробуйте это.