如何在Expo（React Native）中实现启动屏渐隐效果？

嘿，这个需求我之前帮不少开发者搞定过，其实核心思路就是不让启动屏自动消失，而是手动通过动画控制它的隐藏过程，下面是一步一步的具体操作：

第一步：先关掉启动屏的自动隐藏 #

首先打开你的app.json（或者用JS配置的app.config.js），找到expo节点下的splash配置，把autoHideSplash设为false——这是关键，不然Expo会在App加载完直接把启动屏藏起来，根本没机会做动画：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff",
      "autoHideSplash": false // 必须设为false，接管控制权
    }
  }
}

第二步：用React Native动画实现渐隐效果 #

接下来我们要在App的根组件里，做一个和原生启动屏完全一样的“过渡层”，然后让这个层慢慢变透明，露出下面的App内容，最后再真正隐藏原生启动屏。

先导入需要的依赖：

import React, { useEffect, useRef } from 'react';
import { View, Image, Animated, StyleSheet } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

然后写组件逻辑：

export default function App() {
  // 初始化动画值：1代表完全不透明，0代表完全透明
  const fadeAnim = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    async function prepareApp() {
      try {
        // 这里放你的App初始化逻辑——比如加载远程数据、初始化第三方SDK等等
        // await fetchSomeData();
        // await initSomeSDK();
      } catch (error) {
        console.warn('初始化过程出错：', error);
      } finally {
        // 初始化完成后，启动渐隐动画
        Animated.timing(fadeAnim, {
          toValue: 0,
          duration: 500, // 动画时长，这里是0.5秒，可按需调整
          useNativeDriver: true, // 启用原生驱动，动画更流畅
        }).start(async () => {
          // 动画结束后，再隐藏原生启动屏
          await SplashScreen.hideAsync();
        });
      }
    }

    prepareApp();
  }, []);

  // 动画没结束时，显示过渡层（和原生启动屏完全一致）
  if (fadeAnim._value > 0) {
    return (
      <Animated.View style={[styles.splashWrapper, { opacity: fadeAnim }]}>
        <Image
          source={require('./assets/splash.png')} // 和app.json里的启动屏图片保持一致
          style={styles.splashImage}
          resizeMode="contain"
        />
      </Animated.View>
    );
  }

  // 动画结束后，显示你的App主内容
  return (
    <View style={styles.appWrapper}>
      {/* 这里放你的App页面内容，比如导航、首页组件等等 */}
    </View>
  );
}

// 样式要和原生启动屏完全匹配，避免切换突兀
const styles = StyleSheet.create({
  splashWrapper: {
    flex: 1,
    backgroundColor: '#ffffff', // 和app.json里的启动屏背景色一致
    justifyContent: 'center',
    alignItems: 'center',
  },
  splashImage: {
    width: '80%',
    height: '80%',
  },
  appWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

几个要注意的细节 #

• 一定要保证过渡层的背景色、图片、resizeMode和app.json里的配置完全一致，这样用户完全察觉不到过渡的存在
• 动画时长可以自己调，比如设为1000就是1秒的渐隐效果，按需调整就行
• 如果你的App初始化需要时间（比如加载大量数据），把初始化逻辑放在prepareApp里，等初始化完成再启动动画，这样用户不会看到“启动屏消失后App还在加载”的尴尬情况
• 记得在iOS和Android上都测试一下，确保动画在两个平台上都流畅

这样操作下来，就能实现非常自然的启动屏渐隐效果啦，用户体验会顺畅很多～

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