![](/img/trans.png)
[英]Getting undefined is not an object evaluating navigation.navigate
[英]('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.