React Native 如何在启动画面设置 Gif 图像？

Question

我创建了新的 React Native 移动应用程序，我需要将 gif 图像设置为启动画面。任何示例或源代码都可以帮助我做到这一点。

render() {
    return (
      <View style={styles.container}>
        {/*<BackgroundImage source={Images.splashScreen}*/}
        {/*       style = {{width: 315, height: 383}} />*/}

        <Image
            style={{width: 300, height: 200}}
            source={{uri: 'http://gifsstore.com/public/upload/gifs/15609427721560942769.gif'}} />
      </View>
    );
  }

Answer 1

Android

支持 GIF 和 WebP

构建您自己的本机代码时，Android 默认不支持 GIF 和 WebP。

您需要在 android/app/build.gradle 中添加一些可选模块，具体取决于您的应用程序的需要。

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.10.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

此外，如果您将 GIF 与 ProGuard 一起使用，则需要在 proguard-rules.pro 中添加此规则：

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

例子

<Image source={require('./path/to/image/loading.gif')} />

或

<Image source={{uri: 'http://www.urltogif/image.gif'}} />

Apply Link to GIF

Answer 2

您也可以使用 FastImage 实现该功能。它还支持 gif 文件

你也可以试试下面的代码

import FastImage from 'react-native-fast-image'

   <FastImage
            style={{ width: "100%", height: "100%" }}
            source={{
              uri: "your URL", //give your url here
              priority: FastImage.priority.normal
            }}
            resizeMode={FastImage.resizeMode.contain}
            onLoad={() => {
              setTimeout(
                () => {
                //navigate to another screen after some times
                },
                15000
              );
            }}
          />

Answer 3

这里的这些答案似乎有点误导。问题询问如何使用本机反应将其添加到启动画面。解决方案说明了如何将 gif 添加到项目中，但没有说明如何将它们添加到启动画面。

启动画面应该在 JS 包加载 IE 之前加载，在 JS 包加载之前无法访问来自 React Native 的 render 方法。

解决方案：Android

实际上可以直接在启动画面中有一个 gif

资源：Can I Add GIF format Image as a Splash Screen

将此存储库视为将 gif 集成到启动画面中的示例。 https://github.com/koral--/android-gif-drawable

我今晚 (4/12/2020) 使用 react native 0.62

让它工作

步骤：.

按照 react-native-splash-screen 教程创建 /layout/launch_screen/xml
加入android-gif-drawableapi
将 gif 文件放入可绘制文件夹，然后 link 像这样：

layout/launch_screen.xml @drawable/tutorial 是我的 gif 标题 tutorial.gif

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@color/splashscreen_bg"
    android:layout_height="match_parent">
    <pl.droidsonroids.gif.GifImageView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:src="@drawable/tutorial"
    />
</RelativeLayout>

styles.xml

我可以使用 <item name="android:windowDisablePreview">true</item>

隐藏白屏闪烁

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
                <!-- Add the following line to set the default status bar color for all the app. -->

        <item name="android:statusBarColor">@color/app_bg</item>
        <!-- Add the following line to set the default status bar text color for all the app 
        to be a light color (false) or a dark color (true) -->
        <item name="android:windowLightStatusBar">false</item>
        <!-- Add the following line to set the default background color for all the app. -->
        <item name="android:windowBackground">@color/app_bg</item>
        <!-- Prevents white screen from appearing when opening the app -->
        <item name="android:windowDisablePreview">true</item>
    </style>
</resources>

解决方案：iOS

使用静态徽标资产创建静态启动画面
启动后渲染带有动画版徽标的相同屏幕

希望对大家有所帮助！

React Native 如何在启动画面设置 Gif 图像？

React Native How To Set Gif Image at Splash Screen?

react-native

react-native-android

react-native-ios

解决方案：Android

步骤：.

styles.xml

解决方案：iOS