如何在 React Native 中显示动画 gif？

Question

如何在 react native 中显示动画 gif。这是我尝试过的。

<Image source={{uri: "loading"}} />

它适用于 .png 文件，但当我使用 .gif 文件时，它是空白的。我在某处读到尝试将.gif 重命名为.png，但这仅显示动画 gif 的一帧而没有动画。有什么想法吗？

Answer 1

对于 RN

默认情况下，android react native 应用程序不支持 Gif 图像。 您需要设置使用 Fresco 来显示 gif 图像。 代码：

编辑您的android/app/build.gradle 文件并添加以下代码：

dependencies: { 

    ...

    compile 'com.facebook.fresco:fresco:1.+'

    // For animated GIF support
    compile 'com.facebook.fresco:animated-gif:1.+'

    // For WebP support, including animated WebP
    compile 'com.facebook.fresco:animated-webp:1.+'
    compile 'com.facebook.fresco:webpsupport:1.+' 
}

那么你需要重新打包app，你可以通过两种方式显示gif图像。

1-> <Image 
        source={require('./../images/load.gif')}  
        style={{width: 100, height: 100 }}
    />

2-> <Image 
        source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}  
        style={{width: 100, height:100 }} 
    />

对于 RN >= 0.60

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

implementation 'com.facebook.fresco:animated-gif:2.0.0'   //use

希望对其他人有所帮助，

Answer 2

您需要以这种方式添加扩展并要求它：

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

或

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

Answer 3

对于 React Native 0.60 及更高版本

打开您的android/app/build.gradle 文件并将以下行添加到dependencies 部分的第一部分

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

然后

cd android
gradlew clean
react-native run-android

Answer 4

对于我来说 React native 0.65.1 react-native docs 中的解决方案无效 我必须使用最新版本的 Fresco：

implementation 'com.facebook.fresco:animated-gif:2.5.0'

现在我可以在 Android 上运行 GIF。

您可以通过their website查看最新的 Fresco。

Answer 5

对于 Android，您需要添加 Facebook 的 Fresco 库

React Native 不提供开箱即用的 Gif 支持，但您可以添加 Facebook 的 Fresco 库来添加此支持。

您应该能够简单地将以下内容添加到您的 build.gradle 文件中：

compile 'com.facebook.fresco:animated-gif:0.+'

特定版本兼容性

如果您遇到问题或想使用静态版本（强烈推荐），您可以直接转到以下 React Native 文档页面，并将 URL 中的 0.46 替换为你正在运行的 React Native 版本：

https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android

Answer 6

如果你想使用 gif 作为背景图片，你可以使用

<ImageBackground
 source={yourSourceFile}
> 
 -- your content ---
</ImageBackground>

Answer 7

要在您的项目中添加 gif 和 WebP，您需要一些可选模块。如果 RN 版本 android/app/build.gradle 文件中添加以下行。

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

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

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

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

如果 RN 版本为 0.60 或更高，则在 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.12.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'
}

Answer 8

import React,{useState} from 'react';

**step1 import from react narive  You Can Use (Image) Or (ImageBackground)  **


import { StyleSheet, Text, View ,ImageBackground} from 'react-native';





function LoadingUsers() {
    return(<View style={styles.LoadingView}>



**Step 2 require inside source ImageBackground **



<ImageBackground source={require('../assets/stickman.gif')} style={styles.Gif}><Text>Loading..</Text></ImageBackground>
</View>)
}
 


**Step 3 Set Width ANd height **


const styles = StyleSheet.create({
    LoadingView:{
        flex:1,
    },
    Gif:{
        flex:1,
        width:"100%",
        height:"100%",
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:'#000',
    }
  
    });
    export default LoadingUsers ;

Answer 9

DylanVann / react-native-fast-image 是一个不错的替代方案，它支持 Android（基于 glide 而不是 fresco）和 iOS（SDWebImage）的 GIF，并具有如下所示的附加功能：

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

Answer 10

对于RN >= 0.66

编辑您的android/app/build.gradle 文件并添加以下代码：

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.6.0'