未定义不是对象（评估“ this.props.navigation”）

Question

I'm trying to create basic StackNavigator

This is how my code looks like:

App.js

import React, {
    Component
} from 'react';
import {
    StackNavigator
} from 'react-navigation';
import Login from './src/screens/Login';
import Secured from './src/screens/Secured';
import Register from './src/screens/Register';

const Navigation = StackNavigator({
    Login: {
        screen: Login,
    },
    Register: {
        screen: Register,
    },
    Secured: {
        screen: Secured,
    }
})
export default Navigation;

Login.js

import React, {
    Component
} from "react";
import {
    StyleSheet,
    Text,
    TextInput,
    View,
    Button,
    TouchableOpacity
} from "react-native";
import {
    navigation
} from 'react-navigation';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#FFF5F5",
    },
    texts: {
        height: 150,
    },
    signupText: {
        color: '#000000',
        fontSize: 14
    },
    signupButton: {
        color: '#ff0000',
        fontSize: 16,
        fontWeight: '500'
    },
    loginButton: {
        fontSize: 24
    },
    loginTextCont: {
        flexGrow: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    signupTextCont: {
        flexGrow: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',
        paddingVertical: 16,
        flexDirection: 'row'
    },
});

export default class Login extends Component {
    static navigationOptions = {
        title: "Login",
    };
    render() {
        return ( <
            View style = {
                styles.container
            } >
            <
            View style = {
                styles.loginTextCont
            } >
            <
            Text style = {
                {
                    fontSize: 36,
                    fontFamily: "Futura"
                }
            } >
            Willkommen zu < /Text> <Text style={{fontSize: 36, fontFamily: "Futura", color:'#ff0000' }}>LifeStorm!</Text >
            <
            View style = {
                {
                    width: 50,
                    height: 20
                }
            }
            /> <
            TextInput placeholder = "Benutzer Name" / >
            <
            View style = {
                {
                    width: 50,
                    height: 3
                }
            }
            /> <
            TextInput placeholder = "Passwort" / >
            <
            View style = {
                {
                    width: 50,
                    height: 10
                }
            }
            /> <
            TouchableOpacity onPress = {
                () => this.props.navigation.navigate("Register")
            } > < Text style = {
                styles.loginButton
            } > Weiter < /Text></TouchableOpacity >
            <
            /View> <
            View style = {
                styles.signupTextCont
            } >
            <
            Text style = {
                styles.signupText
            } >
            Haben Sie kein Konto ?
            <
            /Text> <
            TouchableOpacity onPress = {
                this.signup
            } > < Text style = {
                styles.signupButton
            } > Sich anmelden < /Text></TouchableOpacity >
            <
            /View> <
            /View>
        );
    }
}

Register.js

import React, {
    Component
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    TouchableOpacity
} from 'react-native';
import {
    navigation
} from 'react-navigation';

import Form from '../forms/Form';

export default class Register extends Component < {} > {
    static navigationOptions = {
        title: "Register",
    };

    render() {
        return ( <
            View style = {
                styles.container
            } >
            <
            Logo / >
            <
            Form type = "Signup" / >
            <
            View style = {
                styles.signupTextCont
            } >
            <
            Text style = {
                styles.signupText
            } > Already have an account ? < /Text> <
            TouchableOpacity onPress = {
                () => navigate("Login")
            } > < Text style = {
                styles.signupButton
            } > Sign in < /Text></TouchableOpacity >
            <
            /View> <
            /View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#455a64',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    signupTextCont: {
        flexGrow: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',
        paddingVertical: 16,
        flexDirection: 'row'
    },
    signupText: {
        color: 'rgba(255,255,255,0.6)',
        fontSize: 16
    },
    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '500'
    }
});

module.exports = Register;

Every time when I run my app on iPhone through Expo I have the same mistake:

undefined is not an object(evaluating "this.props.navigation")

If I understood properly, then the mistake is in Login.Js

I've tried already many different solutions, but nothing worked.

Where is the mistake?

Answer 1

1.There is no need to import "navigation" on every screen to use it.Remove the line import { navigation } from 'react-navigation'; on both screens.

2.In Register.js file you are using
TouchableOpacity onPress = {() => navigate("Login")} have you declared it anywhere as described in official docs: https://facebook.github.io/react-native/docs/navigation.html

Answer 2

The first step is to install react-navigation in your project as follows
npm install --save react-navigation

No need to import navigation, instead you have to add constructor and use below code
constructor(props) {
super(props);
}
Also add below code as follows
render() {
const { navigate } = this.props.navigation;
}
use "navigate('Login')" to navigate to login screen