React Native问题：SplashScreen中navigation未定义无法跳转至SignUpScreen

问题描述 #

我刚开始自学编码，尝试从SplashScreen跳转至SignUpScreen时遇到错误：navigation is undefined，相关代码如下：

App.js #

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {enableScreens} from 'react-native-screens';
enableScreens();

import SplashScreen from './screens/SplashScreen';
import SignUpScreen from './screens/SignUpScreen';
import DashBoard from './screens/DashBoard';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="SplashScreen" screenOptions={{headerShown: false}}>
        {/* <Stack.Screen name="SplashScreen" component={SplashScreen}/>
        */}

<Stack.Screen name="SplashScreen">
  {(props) => <SplashScreen {...props}/>}
</Stack.Screen>
        <Stack.Screen name="SignUpScreen" component={SignUpScreen}/>
        <Stack.Screen name="Dashboard" component={DashBoard}/>
        
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

SplashScreen.js #

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
import { IMAGES } from '../screens/base_images'

const SplashScreen = ({ navigation }) => {
  console.log("Navigation Prop in SplashScreen:", navigation);

  const handleGetStarted = () => {
    if (!navigation) {
      console.error("UNDEFINED");
      return;
    }
    navigation.navigate('SignUpScreen');
  };

  return (
    <View style={styles.container}>
      <Image source={IMAGES.splashImage1} style={styles.backgroundImage}/>

      <View style={styles.logoContainer}>
        <Text style={styles.logoText}>LOGO TO GO HERE</Text>
      </View>

      <View style={styles.contentBox}>
        <Text style={styles.description}>
          Features trending and popular artists in the world.
        </Text>

        <TouchableOpacity style={styles.button} onPress={handleGetStarted}>
          <Text style={styles.buttonText}>Get Started</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default SplashScreen;

SignUpScreen.js #

import React, { useState } from 'react';
import { 
  View, Text, TextInput, TouchableOpacity, StyleSheet, Switch 
} from 'react-native';

const SignUpScreen = ({ navigation }) => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [dailyReports, setDailyReports] = useState(false);
  const [weeklySummary, setWeeklySummary] = useState(true);

  const isFormValid = firstName && lastName && email && password && confirmPassword;

  return (
    <View style={styles.container}>
   
      <Text style={styles.title}>Sign up</Text>

      <TextInput style={styles.input} placeholder="First name" value={firstName} onChangeText={setFirstName}/>
      <TextInput style={styles.input} placeholder="Last name" value={lastName} onChangeText={setLastName}/>
      <Text style={styles.infoText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, ipsum eu auctor</Text>
      <TextInput style={styles.input} placeholder="Email" keyboardType="email-address" value={email} onChangeText={setEmail}/>
      <Text style={styles.subText}>We will email you</Text>
      <TextInput style={styles.input} placeholder="Password" secureTextEntry value={password} onChangeText={setPassword}/>
      <TextInput style={styles.input} placeholder="Confirm Password" secureTextEntry value={confirmPassword} onChangeText={setConfirmPassword}/>

      <View style={styles.switchContainer}>
        <View style={styles.switchRow}>
          <Switch value={dailyReports} onValueChange={setDailyReports}/>
          <View>
            <Text style={styles.switchLabel}>Daily reports</Text>
            <Text style={styles.switchSubText}>Get a daily activity report via email.</Text>
          </View>
        </View>
        <View style={styles.switchRow}>
          <Switch value={weeklySummary} onValueChange={setWeeklySummary}/>
          <View>
            <Text style={styles.switchLabel}>Weekly summary</Text>
            <Text style={styles.switchSubText}>Get a weekly activity report via email.</Text>
          </View>
        </View>
      </View>


      <TouchableOpacity 
        style={[styles.button, !isFormValid && styles.buttonDisabled]} 
        disabled={!isFormValid}
      >
        <Text style={styles.buttonText}>Continue</Text>
      </TouchableOpacity>

      <Text style={styles.footerText}>
        Already have an account? 
        <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
          <Text style={styles.signInText}> Sign in</Text>
        </TouchableOpacity>
      </Text>
    </View>
  );
};

export default SignUpScreen;

解决方案 #

核心修复 #

你的SplashScreen路由写法虽然尝试传递props，但可以简化为React Navigation的标准写法，确保导航props自动传递：

将App.js中的SplashScreen路由替换为：

<Stack.Screen name="SplashScreen" component={SplashScreen}/>

额外检查点 #

• SignUpScreen中存在跳转到SignIn页面的逻辑，但当前路由未注册该页面，后续若需要实现登录功能，需添加对应的Stack.Screen。
• 确保所有依赖包（@react-navigation/native、@react-navigation/stack、react-native-screens等）都已正确安装并配置。

内容的提问来源于stack exchange，提问作者Hsani