React Native中显示文本2秒后无法跳转至HomeScreen的问题

核心错误分析 #

• navigation.navigate参数错误：navigation.navigate()要求传入路由名称字符串，而非组件本身。你代码中直接传入HomeScreen组件是错误的，应该使用导航栈中注册的屏幕名称（比如'Home'）。
• 缺少导航容器配置：你的代码未配置NavigationContainer和栈导航结构，导致SplashScreenComponent无法获取有效navigation属性，进而无法完成页面跳转。

修复后的完整代码 #

App.js

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import * as SplashScreen from 'react-native-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/HomeScreen';

const Stack = createStackNavigator();

const SplashScreenComponent = ({ navigation }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const hideSplash = async () => {
      await SplashScreen.hide();
      setIsVisible(false);
      // 传入路由名称字符串，对应栈中注册的屏幕
      navigation.navigate('Home');
    };

    const timeoutId = setTimeout(hideSplash, 2000);
    return () => clearTimeout(timeoutId);
  }, [navigation]);

  return isVisible ? (
    <View style={styles.container}>
      <Text>Hello App</Text>
    </View>
  ) : null;
};

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

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash" screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Splash" component={SplashScreenComponent} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

依赖安装说明

如果尚未安装React Navigation相关依赖，执行以下命令：

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/stack

• iOS平台额外执行：npx pod-install
• Android平台无需额外配置，依赖会自动集成（若有问题可参考React Navigation官方文档的原生配置步骤）

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