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

Question

我最近开始研究React-native并尝试使用react-navigation但仍然遇到这个问题。

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;

试试这个。