React Native如何在启动屏幕上设置Gif图像？


React Native How To Set Gif Image at Splash Screen?

我创建了新的react native移动应用程序，需要将gif图像设置为初始屏幕。任何示例或源代码都可以帮助我做到这一点。

1
2
3
4
5
6
7
8
9
10
11
12
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>
    );
  }

这些答案似乎有点误导。问题询问如何使用react native将其添加到初始屏幕。解决方案说明了如何将gif添加到项目中，而不是如何将其添加到初始屏幕。

旨在在JS捆绑包加载IE之前加载启动屏幕，而在JS捆绑包加载之前将无法访问来自react native的render方法。

解决方案：Android

实际上可以直接在启动画面中显示gif

资源：我是否可以将GIF格式的图像添加为启动画面

查看此仓库，作为将gif集成到初始屏幕的示例。
https://github.com/koral--/android-gif-drawable

我实际上已经在今晚(2020年4月12日)运行它，并以本机0.62响应了

脚步：。

  • 按照react-native-splash-screen教程创建/layout/launch_screen/xml
  • 添加android-gif-drawable API
  • 将gif放入drawable文件夹，然后像这样链接它：

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?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>

    ，我能够使白屏闪光灯变高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <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

  • 使用静态徽标资产创建静态初始屏幕
  • 启动后，呈现与徽标的动画版本相同的屏幕

    • 希望这对所有人都有帮助！

    您也可以将FastImage用于该功能。它还提供了对gif文件的支持

    您也可以尝试以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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
                  );
                }}
              />
    相关讨论

    Android上的GIF和WebP支持

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

    您将需要根据应用程序的需要在android / app / build.gradle中添加一些可选模块。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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中添加此规则：

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

    示例

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

    或

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

    将链接应用于GIF