如何在Expo中使用Lottie文件作为Root启动屏？已尝试库但未显示

你遇到的问题核心是react-native-lottie-splash-screen是为纯React Native项目设计的，Expo的启动屏机制和纯RN不同，尤其是Managed Workflow下无法直接修改原生XML文件。下面分两种场景给出解决方案：

一、Bare Workflow（已 eject 的Expo项目） #

如果你已经切换到Bare Workflow，可按以下步骤排查修复：

1. 检查Lottie文件配置 #

• 确保Lottie动画文件（fireworks.json）放在android/app/src/main/res/raw/目录下，文件名必须全小写、无空格/特殊字符。
• 确认@color/background在android/app/src/main/res/values/colors.xml中已定义，避免因背景色未加载导致显示异常。

2. 补全依赖与原生配置 #

• 除了react-native-lottie-splash-screen，还需安装Lottie原生依赖：

  npm install lottie-react-native
  # 或 yarn add lottie-react-native
  

• 在MainActivity.java中添加启动屏初始化代码：

  import com.airbnb.lottie.LottieAnimationView;
  import com.henrymorgen.rn_lottie_splash_screen.LottieSplashScreen; // 对应库的导入路径
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // 显示Lottie启动屏
    LottieSplashScreen.show(this, R.id.lottie);
  }
  

3. 调整launch_screen.xml配置 #

修改你的XML，避免动画被拉伸或覆盖：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:gravity="center"> <!-- 添加居中属性 -->

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie"
    android:layout_width="wrap_content" <!-- 改为wrap_content避免拉伸 -->
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/fireworks"
    app:lottie_autoPlay="true"
    app:lottie_loop="false"
    app:lottie_scale="1.0"/> <!-- 控制动画缩放比例 -->
</LinearLayout>

4. 清理缓存并重建 #

cd android && ./gradlew clean && cd ..
npx react-native run-android

二、Managed Workflow（未 eject 的Expo项目） #

Managed Workflow无法修改原生XML，需通过JS层实现Lottie启动屏：

1. 安装依赖 #

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

2. 配置app.json #

禁止Expo自动隐藏启动屏：

{
  "expo": {
    "splash": {
      "hideAfterLaunch": false,
      // 可选：设置静态启动屏（和Lottie第一帧一致），填补JS加载的空白期
      "image": "./assets/splash-static.png",
      "backgroundColor": "#你的背景色"
    }
  }
}

3. 实现Lottie启动屏组件 #

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

// 阻止启动屏自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const animationRef = useRef(null);

  useEffect(() => {
    // 动画播放完成后隐藏启动屏
    const hideSplash = async () => {
      await animationRef.current?.play();
      await SplashScreen.hideAsync();
    };
    hideSplash();
  }, []);

  return (
    <View style={styles.container}>
      {/* Lottie启动屏 */}
      <LottieView
        ref={animationRef}
        source={require('./assets/fireworks.json')}
        style={styles.animation}
        loop={false}
      />
      {/* 你的应用主内容 */}
      {/* <YourMainAppContent /> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#你的背景色',
  },
  animation: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

注意事项 #

• JS层的Lottie启动屏会在JS加载完成后显示，若想完全替代原生启动屏，需确保静态启动屏（app.json中配置的image）与Lottie第一帧完全一致。

内容的提问来源于stack exchange，提问作者Muhammad Jawad Mansoor