Question

如何在本机中显示动画gif。这就是我尝试过的。

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

使用.png文件时效果很好但是当我使用.gif文件时它是空白的。我在某处尝试将.gif重命名为.png，但只显示动画gif的一帧而没有动画。有什么想法吗？

Answer 1

默认情况下，android react本机应用程序不支持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 }} 
    />

我希望它对其他人有帮助，

Answer 2

您需要添加扩展程序并以此方式要求：

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

或

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

RN处理好的gif图像，请检查this example。

Answer 3

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

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 4

如果你想使用gif作为背景图像而不是你可以使用

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

Answer 5

对于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 6

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 7

要在项目中添加gif和WebP，您需要一些可选模块。如果RN版本为<= 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'
}

Answer 8

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

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

8 个答案:

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

对于React Native 0.60和更高版本