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

问题描述

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

In React native, before app launch, We can see white screen. I want to load splash screen immediate on app icon click. I want to avoid white background.

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

Using react-native-splash-screen we can do it but it only support png not support lottie animation. any solution for this?

推荐答案

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

I don't know found a solution. I will write mine.

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

final lottieVersion = "2.8.0"

在之后宣布最终的彩票版本

Declare final lottie version after

import com.android.build.OutputFile

1. 在同一位置，您必须将此行添加到

dependencies {

这里会有一些

implementation [ ... ]

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

1. 完成这些步骤后，我们会将这些行添加到我们的 launch_screen.xml

我们需要一个用于我们的 lottie json 的原始目录.在 res 目录下创建一个名为 raw 的目录，把你的 lottie 动画放到 raw 文件夹中.

we need a raw directory for our lottie json's. Create a directory under the res directory named raw and put your lottie animation into the raw folder.

<?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>

本反应本机指南 >= 60 ，谢谢

This guide for react native >= 60 , Thanks

这篇关于我想在启动画面+ React Native 中播放lottie 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！