在React Native中如何显示动态gif图像？

Question

在React Native中如何显示动态gif图像？

78

我该如何在React Native中显示动态GIF图像？这是我尝试过的方法。

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

它在使用 .png 文件时运行良好，但在使用 .gif 文件时则是空白。我曾经读到过尝试将 .gif 重命名为 .png ，但这只会显示动画 gif 的一个帧而没有动画。有任何想法吗？

- Dev01

15个回答

38

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

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

或者

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

- G. Hamaide

我如何在Images.xcassets中链接到一个gif？ - Dev01

1

RN 不再使用 Images.xcassets。你需要把它们放在项目的一个文件夹中，并使用相对路径引用该文件。 - G. Hamaide

1

请查看此链接：https://facebook.github.io/react-native/docs/image.html#content，并查看其“source”属性。 - Train

32

据我所知并测试过，这在安卓系统上不起作用。 - Orlando

哦，酷啊，那个扩展！ - undefined

显示剩余7条评论

36

适用于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

- Mahdi Bashirpour

1

我刚刚使用了implementation 'com.facebook.fresco:animated-gif:2.0.0'，并在gradlew clean之后。 - Davide Martina

@Bashirpour 我建议你按照DavideMartina的建议进行更新。 - Yossi

7

我必须使用 ./gradlew clean。 - Nathan

有iOS的任何解决方案吗？ - famfamfam

@famfamfam 在iOS上，它应该从一开始就可以工作。 - srstomp

30

在我的 React Native 0.65.1 版本中，React Native 文档中提供的解决方案未能奏效，我不得不使用最新版本的 Fresco 库：

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

现在，GIF 已经在我的 Android 上正常工作了。

您可以从他们的网站检查最新的 Fresco 版本。

- Kash

2

版本方面你抓得很好，Android Studio 快速操作只更新到了 2.0.0 版本，但仍然无法正常工作。我不得不手动将其更新到 2.5.0 版本。 - heathkev

1

惊人的是，他几乎找了两天。 - ChandraKumar

2

你值得所有的点赞。 - Kyriakos Xatzisavvas

这适用于最近的React Native版本0.67.1。谢谢。 - Mahdieh Shavandi

我必须关闭模拟器并重新启动它，然后才能使其正常工作。非常感谢。 - Manil Malla

12

安卓需要添加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

- Joshua Pinter

1

使用静态版本是非常重要的，如果不使用正确的版本，程序会崩溃。根据文档中指定的版本进行切换可以解决这个问题。 - Blue Bot

1

@BlueBot 我非常注重静态版本控制。依赖版本中越少的魔法，就越好。这可以确保最少的意外情况发生。 - Joshua Pinter

那么，如果React Native默认不支持GIF，为什么它在苹果/IOS上可以工作？ - kojow7

https://dev59.com/ZlcP5IYBdhLWcg3wYo_i - oliversisson

1

具有特定版本兼容性的救星。 - Dale_Plante

3

DylanVann/react-native-fast-image是一个不错的替代方案，支持Android上的GIF（基于glide而非fresco），并支持iOS(SDWebImage)，还具有以下额外功能：

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}
    />
)

- Leo

1

很棒，已经在使用FastImage，不需要添加freco。 - eckc

3

对于react-native": "0.68.2"这个版本，它对我来说是可行的。

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

- Syed Amir Ali

请参考此文件中的 FRESCO_VERSION（https://github.com/facebook/react-native/blob/latest/ReactAndroid/gradle.properties）以了解最新的 React Native 版本应使用哪个版本（文档：https://reactnative.dev/docs/image）。 - velkoon

3

如果您想将GIF图像用作背景图像，可以使用以下方法。

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

- Chotala Paresh

3

要在项目中添加gif和WebP格式的图片，您需要安装一些可选模块。如果React Native版本是<=0.59，则需要在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'
}

- Imran

很好，你把它添加到你的Expo应用程序中的哪里呢？ - webmaster

@网站管理员，您可以阅读此内容：https://forums.expo.io/t/display-animated-gif/4940/6 - Imran

实际上，将 .gif 转换为视频文件（mp4）就解决了我的问题 ;) 不需要导入什么东西.. :) - webmaster

2

我通过向FastImage添加源代码来解决它

将其添加到您的应用程序中

yarn add react-native-fast-image

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


 
  <FastImage
          resizeMode="contain"
          style={{width: 70, height:70}}
       //===>   source={require('../images/<imageName>.gif')}
          //OR
       //===>   source={{uri: 'https://<YOUR_LINK>.gif'}}
        />
       )};

- Mo Hassan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Venkatesh Somu · Accepted Answer

对于RN小于0.60的版本：

在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.+' 
}

然后你需要再次打包应用程序，你可以通过以下两种方式展示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

我希望这能对其他人有所帮助，