reactjs - 我想在初始屏幕 React Native 中播放 lottie 动画

Question

在 React Native 中，在应用启动之前，我们可以看到白屏。我想在点击应用程序图标时立即加载启动画面。我想避免白色背景。

使用 react-native-splash-screen我们可以做到，但它只支持 png 不支持 lottie 动画。有什么解决办法吗？

Answer 1

我不知道找到了解决方案。我会写我的。

在你的项目中去 android/app/build.gradle

final lottieVersion = "2.8.0"

之后宣布最终的彩票版本

import com.android.build.OutputFile

在同一个地方，您必须将此行添加到

dependencies {

这里会有一些

implementation [ ... ] 

我们将添加 implementation 'com.airbnb.android:lottie:$lottieVersion'

在这些步骤之后，我们将这些行添加到我们的 launch_screen.xml 中。

我们需要一个用于我们的 lottie json 的原始目录。在 res 目录下创建一个名为 raw 的目录，并将您的 lottie 动画放入 raw 文件夹中。

<?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="@drawable/background_splash">

 <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes='@raw/loading_chat'
        app:lottie_loop="true"
        app:lottie_autoPlay="true"
    />

</LinearLayout>

本指南 React Native >= 60 ，谢谢