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。无需在每个屏幕上都导入“导航”即可使用。删除行import { 导航 }来自“反应导航”；在两个屏幕上。

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

Answer 2

第一步是按以下步骤在项目中安装react-navigation
npm install --save react-navigation

无需导入导航，而是必须添加构造函数并使用以下代码
构造函数（props）{
    超级道具；
}
还添加如下代码
render（）{
    const {navigation} = this.props.navigation;
  }
使用“ navigate（'Login'）”导航到登录屏幕

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

2 个答案: