类型错误：未定义不是对象（评估“_this.props.navigation.navigate”）

Question

I'm new to react-native and I'm getting this error. I already followed some solutions but I still get this, I also make sure that I followed tutorial properly, here's the code.

AppNavigation.js

import StackNavigator from 'react-navigation'
import Home from './Modules/Home'

const Routing = StackNavigator({
    HOME: {screen: Home}
})

export default Routing

StartScreen.js

import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import {DotIndicator} from 'react-native-indicators';

class StartScreen extends React.Component{

    switchPage = () => this.props.navigation.navigate('HOME');

    render() {
        return (
            <View style={{backgroundColor:'#3B3C3B', flex: 1}}>
                <View style={{flex: 1}}></View>
                <View style={styles.container, {flex: 1}}>
                    <Text style={styles.text}>MY POCKET</Text>
                </View>
                <View style={{flex: 1}}>
                    <DotIndicator color='#646363'/>
                    <Button onPress={this.switchPage} title='Click Me'/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignContent: "center"
    },
    text: {
        fontSize:55,
        fontWeight: "bold",
        color: '#B5B5B5',
        textAlign: "center"
    }
})

export default StartScreen;

Answer 1

You must use withNavigation . Like this:

import {withNavigation} from 'react-navigation'

class StartScreen extends React.Component{
    // ...
}

export default withNavigation(StartScreen) // export component like this