我想在Splash屏幕 React Native中播放Lottie动画

Question

在react Native中，在应用程序启动之前，我们可以看到白屏。我想在应用程序图标上立即加载Splash屏幕。我想避免白色背景。

使用React-Native-splash-Screen，我们可以做到这一点，但它仅支持PNG不支持Lottie动画。对此有任何解决方案吗？

Answer 1

如果您在React Native中寻找动画启动屏幕，我建议您查看此软件包。(NPM中的搜索关键字是" React-Native-Lottie-Splash-Screen"(

反应本地lottie-splash-screen

此软件包叉子"反应 - 本地透明屏幕"回购并添加Lottie Splash屏幕的功能。

它使用airbnb lottie文件实现动画飞溅屏幕。另外，我将其应用于多个React本地项目，并且效果很好。祝您有美好的一天！

Answer 2

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

1. 在您的项目中Go Android/app/build.gradle

final lottieVersion = "2.8.0"

在

之后声明最终乐曲

import com.android.build.OutputFile

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

dependencies {

这里有一些

implementation [ ... ] 

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

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

我们需要一个原始目录才能为我们的Lottie Json's。在名为RAW的RES目录下创建一个目录，然后将您的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>

本反应本机＆gt; = 60的指南，谢谢