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

Question

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

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

Answer 1

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

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

final lottieVersion = "2.8.0"

在

之后声明最终的 lottie 版本

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，谢谢

Answer 2

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

react-native-lottie-splash-screen

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

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

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

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

native

screen

splash-screen

reactjs

react-native-android