我想在启动画面+ React native 中播放 lottie 动画

I want to play lottie animation in splash screen+ React native

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

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

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

  1. 在你的项目中去 android/app/build.gradle
final lottieVersion = "2.8.0"

之后声明最终的 lottie 版本
import com.android.build.OutputFile
  1. 在同一个地方,你必须将这一行添加到
dependencies {

这里会有一些

implementation [ ... ] 

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

  1. 完成这些步骤后,我们会将这些行添加到我们的 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,谢谢

如果您在 React Native 中寻找动画启动屏幕,我建议您查看此包。 (在 npm 中搜索关键字是“react-native-lottie-splash-screen”)

react-native-lottie-splash-screen

这个包派生了“react-native-lottie-screen”repo 并添加了 lottie 启动画面的功能。

它使用airbnb lottie文件实现动画启动画面。此外,我将其应用于多个 React Native 项目并且效果很好。祝你有美好的一天!