undefined 不是对象（正在计算 "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 我的应用程序时，我都会犯同样的错误：

undefined 不是对象（正在计算 "this.props.navigation"）

如果我没看错，那么错误就在Login.Js

我已经尝试了很多不同的解决方案，但没有任何效果。

哪里错了？

Answer 1

1.There 无需在每个屏幕上导入 "navigation" 即可使用 it.Remove 行 import { 导航 } 来自 'react-navigation'；在两个屏幕上。

2.In Register.js 您正在使用的文件
TouchableOpacity onPress = {() => navigate("Login")} 你有没有按照官方文档中的描述在任何地方声明它： https://facebook.github.io/react-native/docs/navigation.html

Answer 2

第一步是在你的项目中安装react-navigation，如下所示
npm install --save react-navigation

无需导入导航，而是必须添加构造函数并使用以下代码
构造函数（道具）{
超级（道具）；
}
还要添加下面的代码如下
渲染（）{
常量 { 导航 } = this.props.navigation;
}
使用 "navigate('Login')" 导航到登录屏幕

undefined 不是对象（正在计算 "this.props.navigation"）

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

javascript

reactjs

react-native

react-native-ios