簡體   English   中英

('navigation.navigate') undefined 不是 object

[英]('navigation.navigate') undefined is not an object

我正在使用 onPress 處理 TouchaleOpacity 以導航到名為“SignInScreen”的屏幕,但不起作用...(onPress={() => navigation.navigate('SignInScreen')})那個錯誤 TypeError: undefined 是不是 object(評估“navigation.navigate”)。 請幫我解決這個問題。 我做了很多事情,但我仍然無法修復它。

進口

import React, { useState } from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { useTheme } from '@react-navigation/native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { ImageBackground, StyleSheet, View, Image, Text, TextInput, Button, TouchableOpacity, Dimensions, StatusBar, Animated } from 'react-native';
import * as Animatable from 'react-native-animatable';
const WelcomeScreen = ({navigation}) => {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Animatable.Image 
                animation="bounceIn" duration={1500} source={require('../assets/logo1.png')} style={styles.logo} resizeMode="stretch"/>
            </View>
            <Animatable.View style={styles.footer} animation="fadeInUpBig">
                <Text style={styles.title}>Stay connected with everyone!</Text>
                <Text style={styles.text}>Sign in with account</Text>
                <View style={styles.button}>
                <TouchableOpacity onPress={() => navigation.navigate('SignInScreen')}>
                    <LinearGradient colors={['#d60939', '#ad022a']} style={styles.signIn} title="Go to SignInScreen">
                        <Text style={styles.textSign}>Get Started</Text>
                        <MaterialIcons name="navigate-next" color="#fff" size={20}/>
                    </LinearGradient>
                </TouchableOpacity>
                </View>
            </Animatable.View>
        </View>
    );
}

const {height} = Dimensions.get("screen");
const height_logo = height * 0.28;

const styles = StyleSheet.create({
    background: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: 'center',
    },
    container: {
        flex: 1, 
        backgroundColor: '#cfcfcf'
    },
    loginButton: {
        width: '100%',
        height: 60,
        backgroundColor: '#242222',
    },
    registerButton: {
        width: '100%',
        height: 60,
        backgroundColor: '#0d0c0c',
    },
    logo: {
        width: height_logo,
        height: height_logo,
    },
    button: {
        alignItems: 'flex-end',
        marginTop: 30
    },
    header: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center'
    },
    footer: {
        flex: 1,
        backgroundColor: '#fff',
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        paddingVertical: 50,
        paddingHorizontal: 30
    },
    logoContainer: {
        position: 'absolute',
        top: '20%',
        alignItems: 'center',
    },
    title: {
        color: '#05375a',
        fontSize: 30,
        fontWeight: 'bold'
    },
    text: {
        color: 'grey',
        marginTop:5
    },
    signIn: {
        width: 150,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50,
        flexDirection: 'row'
    },
    textSign: {
        color: 'white',
        fontWeight: 'bold'
    },
    apptitle: {
        fontWeight: "bold",
        color: 'white',
        textShadowColor: 'rgba(0, 0, 0, 0.75)',
        textShadowOffset: {width: -1, height: 1},
        textShadowRadius: 10,
        padding: 5,
        borderRadius: 10,
        fontSize: 40,
        letterSpacing: 10,
    },
    info: {
        fontWeight: "bold",
        color: 'white',
        top: 20,
        borderRadius: 10,
        fontSize: 20,
        textAlign: 'center',
    },
    logindetails: {
        width: '70%', 
        height: 60, 
        backgroundColor: 'white', 
        textAlign: 'center',
        borderRadius: 50,
        margin: 5,
        color: 'black',
        bottom: '27%',
    },
})


export default WelcomeScreen;



OUTPUT

Uncaught Error: undefined is not an object (evaluating 'navigation.navigate')

SingInScreen 我要導航的內容

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

const SignInScreen = () => {
    return (
        <View>
            <Text>SignInSreen</Text>
            <Button title="Click Here" onPress={() => alert('Button Clicked!')}/>
        </View>
    )
}

export default SignInScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
})

在此處輸入圖像描述

由於我無法發表評論,因此我將其作為答案。 此錯誤表明navigation未定義,這再次意味着您忘記從組件的父級傳遞它,或者您傳遞的任何內容都沒有定義。

當您使用react-native ,我假設您使用的是react-navigation 在這種情況下,請分享您將屏幕放在導航器中的NavigationWrapper代碼。 所以我們可以找到你的錯誤。

解構此屏幕中的導航並重試


const SignInScreen = ({navigation}) => {
    return (
        <View>
            <Text>SignInSreen</Text>
            <Button title="Click Here" onPress={() => alert('Button Clicked!')}/>
        </View>
    )
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM