如何使用Expo配合Lottie实现React Native动画Splash Screen

方案完全可行，不需要 eject 项目，也不需要额外原生配置。核心实现逻辑是用原有的静态启动屏做底层兜底，待JS runtime和Lottie资源加载完成后无缝衔接动画，动画播放结束再进入应用主路由，普通用户完全感知不到两层启动屏的切换过程。

实现步骤 #

• 第一步：安装所需依赖
  执行命令安装两个官方兼容库：

  npx expo install expo-splash-screen lottie-react-native
  

• 第二步：调整原有静态启动屏配置
  保留你当前已配置的png静态启动页，务必将静态启动页的背景色调整为和你的Lottie动画背景色完全一致，这是实现无缝切换的核心要点。
• 第三步：修改App入口逻辑
  核心逻辑是先阻止原生启动屏自动隐藏，等Lottie动画加载完成且播放结束后，再隐藏启动屏并渲染主应用内容，示例代码如下：

  import { StatusBar } from 'expo-status-bar';
  import { StyleSheet, View } from 'react-native';
  import SplashScreen from 'expo-splash-screen';
  import LottieView from 'lottie-react-native';
  import { useCallback, useEffect, useRef, useState } from 'react';
  import Home from './src/Home'; // 替换为你的应用首屏组件
  
  // 阻止启动屏自动隐藏
  SplashScreen.preventAutoHideAsync();
  
  export default function App() {
    const [appIsReady, setAppIsReady] = useState(false);
    const lottieRef = useRef(null);
  
    useEffect(() => {
      async function prepare() {
        try {
          // 这里可以加你需要的预加载逻辑，比如资源预加载、用户状态校验等
          await new Promise(resolve => setTimeout(resolve, 100));
        } catch (e) {
          console.warn(e);
        } finally {
          setAppIsReady(true);
        }
      }
      prepare();
    }, []);
  
    const onLottieFinish = useCallback(() => {
      // 动画播放完成后隐藏启动屏，进入主应用
      SplashScreen.hideAsync();
    }, []);
  
    if (!appIsReady) {
      return null;
    }
  
    return (
      <View style={styles.container}>
        <LottieView
          ref={lottieRef}
          autoPlay
          loop={false}
          // 替换为你的Lottie动画文件路径
          source={require('./assets/splash-animation.json')}
          onAnimationFinish={onLottieFinish}
          resizeMode="cover"
          style={styles.lottie}
        />
        <Home />
        <StatusBar style="auto" />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      // 此处背景色和静态启动屏、Lottie背景色保持完全一致
      backgroundColor: '#ffffff',
    },
    lottie: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }
  });
  

注意事项 #

• 尽量选择文件体积小、元素精简的Lottie动画，避免动画加载过慢导致用户感知到切换
• 开发环境下因为JS加载速度较慢可能会有轻微卡顿，打包生产版本后切换会非常流畅
• 如果需要适配不同尺寸的屏幕，可以调整Lottie的resizeMode属性，通常cover或contain就能满足需求

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