获得未定义不是评估 navigation.navigate 的对象答案

【问题标题】：Getting undefined is not an object evaluating navigation.navigate获得未定义不是评估 navigation.navigate 的对象
【发布时间】：2021-07-08 14:56:49
【问题描述】：

我用这个 navigation.navigate('SignInScreen')}> 打开其他页面，但是当我点击 navigation.navigate('SignInScreen' )}> 在照片页面中，我收到了这个错误：

enter image description here

代码：

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({})

【问题讨论】：

您是否将 SplashScreen 组件添加到导航堆栈中？如果没有，您可以按照本指南reactnavigation.org/docs/navigating-without-navigation-prop

标签： javascript react-native react-navigation

【解决方案1】：

每当您从不在导航容器中的组件导航时，您的导航道具未定义您的闪屏组件不在导航容器中可能是屏幕的子级，这就是您无法获得导航道具通过导航的原因来自您渲染 Splashscreen 的父组件。

或

您应该使用 React Navigation 提供的 Navigation Hook 来从导航容器外部的屏幕之间导航......

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

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

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

希望这会有所帮助...

【讨论】：