我正在使用一个乐透动画作为我的react原生应用程序的启动画面。目前的实现是,我刚刚把乐透动画作为我的导航堆栈中的初始页面,但是,在JavaScript获得控制权之前,会有一个延迟。这在iOS上不是一个问题,但在Android上非常明显。我想弄清楚是否有任何方法可以减少延迟。基本上,如何让Android从一开始就画出一些东西(不仅仅是白色)?我试过将动画的第一帧作为原生闪屏,直到动画开始,但过渡看起来仍然非常突然。
sycxhyv71#
这里还有一个类似的问题。Lottie Splash Screen with Expo - animated splash screen with Expo他们推荐使用react-native-animated-screen,他们在expo中也有一个示例。Expo example
gopyfrb32#
对于android,你必须使用react-native-splash-screen,在那里你可以显示Lottie动画。这里是一个简单的例子
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/splash_back"> <ImageView android:id="@+id/imageView" android:layout_width="150dp" android:layout_height="150dp" android:src="@drawable/icon" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.43" tools:ignore="MissingConstraints" /> <TextView android:id="@+id/text_one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="@string/phone_number_tracker" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" app:fontFamily="Poppins-Medium" app:layout_constraintBottom_toTopOf="@+id/animationView" app:layout_constraintEnd_toEndOf="@+id/imageView" app:layout_constraintHorizontal_bias="0.516" app:layout_constraintStart_toStartOf="@+id/imageView" app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintVertical_bias="0.133" /> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animationView" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHeight_percent="0.18" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintVertical_bias="0.63" app:layout_constraintWidth_percent="0.6" app:lottie_autoPlay="true" app:lottie_loop="true" app:lottie_rawRes="@raw/loading" /> </androidx.constraintlayout.widget.ConstraintLayout>
有关详细信息,请访问react-native-splash-screen
2条答案
按热度按时间sycxhyv71#
这里还有一个类似的问题。
Lottie Splash Screen with Expo - animated splash screen with Expo
他们推荐使用react-native-animated-screen,他们在expo中也有一个示例。Expo example
gopyfrb32#
对于android,你必须使用react-native-splash-screen,在那里你可以显示Lottie动画。这里是一个简单的例子
有关详细信息,请访问react-native-splash-screen