未定義不是評估 navigation.navigate 的對象

Question

我用這個 <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}> 打開其他頁面，但是當我點擊 <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>在照片頁面中，我收到此錯誤：

在此處輸入圖片說明

編碼：

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@react-navigation/native';



const SplashScreen = ({navigation}) => {
    const { colors } = useTheme();

    return (
      <View style={styles.container}>
          <StatusBar backgroundColor='#009387' barStyle="light-content"/>
        <View style={styles.header}>
            <Animatable.Image 
                animation="bounceIn"
                duraton="1500"
            source={require('../assets/fmasdeco.png')}
            style={styles.logo}
            resizeMode="stretch"
            />
        </View>
        <Animatable.View 
            style={[styles.footer, {
                backgroundColor: colors.background
            }]}
            animation="fadeInUpBig"
        >
            <Text style={[styles.title, {
                color: colors.text
            }]}>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={['#08d4c4', '#01ab9d']}
                    style={styles.signIn}
                >
                    <Text style={styles.textSign}>Get Started</Text>
                    <MaterialIcons 
                        name="navigate-next"
                        color="#fff"
                        size={20}
                    />
                </LinearGradient>
            </TouchableOpacity>
            </View>
        </Animatable.View>
      </View>
    );
};

export default SplashScreen;

我的頁面 SignUpScreen.Js

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

export default function SignUpScreen() {
    return (
        <View>
            <Text>Hello</Text>
        </View>
    )
}

const styles = StyleSheet.create({})

Answer 1

每當您從不在導航容器中的組件導航時，您的導航道具未定義您的啟動畫面組件不在您的導航容器中，這可能是屏幕的子級，這就是為什么您無法從父級獲得導航道具傳遞導航的原因渲染 Splashscreen 的組件。

或者

您應該使用 React 導航提供的導航掛鈎從導航容器外部在屏幕之間導航....

import { useNavigation } from '@react-navigation/native';

const someComponent = () => { 
  const navigation = useNavigation();

            <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
               <Text>Navigation To Sigin Screen</Text>
            </TouchableOpacity>
}

希望這會有所幫助...