如何在App.js中实现欢迎屏显示4秒后跳转至AppNavigator

我来帮你搞定这个启动欢迎屏的需求，其实用React的状态管理和定时器就能轻松实现。下面是具体的实现步骤：

第一步：创建欢迎屏组件 #

首先我们需要写一个单独的SplashScreen组件，用来展示客户logo和欢迎内容：

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

const SplashScreen = () => {
  return (
    <View style={styles.container}>
      {/* 替换成你的客户Logo路径 */}
      <Image 
        source={require('./assets/customer-logo.png')} 
        style={styles.logo}
        resizeMode="contain"
      />
      {/* 可选：添加欢迎文本 */}
      {/* <Text style={styles.welcomeText}>Welcome</Text> */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff', // 可根据需求自定义背景色
  },
  logo: {
    width: 220,
    height: 220,
  },
});

export default SplashScreen;

第二步：修改App.js控制页面切换 #

接下来我们要在主App组件里，用状态来控制初始显示欢迎屏，4秒后自动切换到导航页：

import React, { useState, useEffect } from 'react';
import SplashScreen from './SplashScreen'; // 确保组件路径正确
import AppNavigation from './AppNavigation'; // 你的导航组件

export default function App() {
  // 状态控制欢迎屏是否显示
  const [showSplash, setShowSplash] = useState(true);

  useEffect(() => {
    // 设置4秒定时器，到时隐藏欢迎屏
    const splashTimer = setTimeout(() => {
      setShowSplash(false);
    }, 4000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(splashTimer);
  }, []);

  // 根据状态渲染对应页面
  return showSplash ? <SplashScreen /> : <AppNavigation />;
}

额外优化建议 #

• 添加过渡动画：如果想让切换更丝滑，可以用Animated组件给欢迎屏加淡出效果，提升用户体验
• 适配不同屏幕：可以根据设备尺寸动态调整logo大小，避免在不同设备上显示异常
• 原生启动屏补充：如果你的APP是基于Expo或者原生React Native开发，还可以配置原生启动屏，避免APP启动时的短暂白屏问题

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