在 React Native 中，在应用启动之前，我们可以看到白屏。我想在点击应用程序图标时立即加载启动画面。我想避免白色背景。
使用react-native-splash-screen我们可以做到，但它只支持 png 不支持 lottie 动画。有什么解决办法吗？
我想在启动画面+ React Native中播放lottie动画
IT技术
reactjs
react-native-android
screen
native
splash-screen
2021-05-11 16:24:08
2个回答
我不知道找到了解决方案。我会写我的。
- 在你的项目中去 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 ，谢谢
如果您在 React Native 中寻找动画启动屏幕，我建议您查看此包。（npm 中的搜索关键字是“react-native-lottie-splash-screen”）
这个包分叉了“react-native-lottie-screen” repo 并添加了 lottie 启动画面的功能。
它使用 airbnb lottie 文件实现动画闪屏。此外，我将此应用于多个react本机项目，并且效果很好。祝你今天过得愉快！