未定義不是對象（評估“ this.props.navigation”）

Question

我正在嘗試創建基本的StackNavigator

這是我的代碼的樣子：

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;

每當我通過Expo在iPhone上運行我的應用程序時，都會遇到相同的錯誤：

未定義不是對象（評估“ this.props.navigation”）

如果我理解正確，那么錯誤在於Login.Js

我已經嘗試了許多不同的解決方案，但是沒有任何效果。

錯誤在哪里？

Answer 1

1.無需在每個屏幕上導入“導航”即可使用它。從“ react-navigation”中刪除行import {navigation}； 在兩個屏幕上。

2，在Register.js文件中使用
TouchableOpacity onPress = {（）=> navigation（“ Login”）}是否已按照官方文檔中的說明在任何地方聲明了它： https : //facebook.github.io/react-native/docs/navigation.html

Answer 2

第一步是在您的項目中安裝react-navigation，如下所示
npm install-保存反應導航

無需導入導航，而是必須添加構造函數並使用以下代碼
構造函數（道具）{
超級（道具）;
}
還添加以下代碼，如下所示
render（）{
const {navigation} = this.props.navigation;
}
使用“ navigate（'Login'）”導航到登錄屏幕