时间戳

首页 > 解决方案 > React Native 如何在启动画面设置 Gif 图像？

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

问题描述

我创建了新的反应原生移动应用程序，我需要将 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>
    );
  }

标签： react-nativereact-native-androidreact-native-ios

解决方案

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

启动画面意味着在 JS 包加载之前加载 IErender来自 react native 的方法在 JS 包加载之前将无法访问。

解决方案：安卓

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

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

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

我今晚（2020 年 4 月 12 日）用react native 0.62让它工作了

脚步：。

  1. 按照 react-native-splash-screen 教程创建/layout/launch_screen/xml
  2. 添加android-gif-drawable api
  3. 将 gif 放入可绘制文件夹中，然后像这样链接它：

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>

样式.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

  1. 使用静态徽标资产创建静态启动画面
  2. 启动后，使用徽标的动画版本渲染相同的屏幕

希望这对大家有帮助！

推荐阅读