React Native安卓端Lottie启动屏延迟及白屏问题解决咨询

核心方案：Android原生层直接加载Lottie动画 #

问题根源是Android在JS引擎初始化完成前会显示默认白屏，直接在原生启动阶段集成Lottie动画可以彻底跳过这个白屏阶段。

步骤1：准备资源与依赖 #

• 将Lottie动画JSON文件放入Android项目的src/main/assets目录（无assets则新建）。
• 在app级build.gradle中添加Lottie原生依赖：

dependencies {
    // 保留现有依赖，新增以下行
    implementation "com.airbnb.android:lottie:6.4.0" // 使用最新稳定版本
}

步骤2：替换原生启动布局 #

修改res/layout/launch_screen.xml（无则新建），用Lottie视图替代静态启动图：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#FFFFFF">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_splash"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_fileName="your_splash_animation.json" <!-- 替换为你的动画文件名 -->
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_scale="1.0"/>
</LinearLayout>

步骤3：监听动画结束并切换至RN内容 #

在MainActivity.kt（或MainActivity.java）中，监听Lottie动画完成事件，结束后隐藏启动屏：

import com.airbnb.lottie.LottieAnimationView
import android.animation.Animator
import android.view.View

class MainActivity : ReactActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val splashLottie = findViewById<LottieAnimationView>(R.id.lottie_splash)
        splashLottie.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator?) {}
            override fun onAnimationEnd(animation: Animator?) {
                // 动画结束后隐藏启动屏，显示RN内容
                splashLottie.visibility = View.GONE
            }
            override fun onAnimationCancel(animation: Animator?) {}
            override fun onAnimationRepeat(animation: Animator?) {}
        })
    }

    // 保留默认的getMainComponentName()等方法
}

步骤4：禁用默认白屏预览 #

在res/values/styles.xml的AppTheme中添加属性，关闭系统默认的启动白屏：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 保留现有属性，新增以下行 -->
    <item name="android:windowDisablePreview">true</item>
</style>

优化过渡效果（解决切换生硬问题） #

如果需要原生Lottie与RN端Lottie无缝衔接，可添加淡入淡出动画：

原生端淡出动画 #

修改MainActivity.kt中的onAnimationEnd方法，先执行淡出再隐藏：

override fun onAnimationEnd(animation: Animator?) {
    val fadeOut = android.animation.ObjectAnimator.ofFloat(splashLottie, "alpha", 1f, 0f)
    fadeOut.duration = 300
    fadeOut.addListener(object : Animator.AnimatorListener {
        override fun onAnimationEnd(anim: Animator?) {
            splashLottie.visibility = View.GONE
        }
        override fun onAnimationStart(anim: Animator?) {}
        override fun onAnimationCancel(anim: Animator?) {}
        override fun onAnimationRepeat(anim: Animator?) {}
    })
    fadeOut.start()
}

RN端淡入动画 #

在RN的Lottie启动屏组件中添加淡入效果：

import LottieView from 'lottie-react-native';
import { Animated, View } from 'react-native';
import React from 'react';

const RNSplashScreen = () => {
  const opacity = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        source={require('./assets/your_splash_animation.json')}
        autoPlay
        loop={false}
        style={{ width: 200, height: 200 }}
      />
    </Animated.View>
  );
};

export default RNSplashScreen;

额外注意事项 #

• 压缩Lottie动画JSON文件，减少加载时间（可使用Lottie官方压缩工具）。
• 确保动画尺寸适配不同Android设备，避免拉伸或留白。

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