我该如何在React Native中显示动态GIF图像?这是我尝试过的方法。
<Image source={{uri: "loading"}} />
它在使用 .png
文件时运行良好,但在使用 .gif
文件时则是空白。我曾经读到过尝试将 .gif
重命名为 .png
,但这只会显示动画 gif 的一个帧而没有动画。有任何想法吗?我该如何在React Native中显示动态GIF图像?这是我尝试过的方法。
<Image source={{uri: "loading"}} />
它在使用 .png
文件时运行良好,但在使用 .gif
文件时则是空白。我曾经读到过尝试将 .gif
重命名为 .png
,但这只会显示动画 gif 的一个帧而没有动画。有任何想法吗?对于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
我希望这能对其他人有所帮助,
你需要添加扩展名并以这种方式要求它:
<Image source={require('./path/to/image/loading.gif')} />
或者<Image source={{uri: 'http://www.urltogif/image.gif'}} />
打开你的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
./gradlew clean
。 - Nathan在我的 React Native 0.65.1 版本中,React Native 文档 中提供的解决方案未能奏效,我不得不使用最新版本的 Fresco 库:
implementation 'com.facebook.fresco:animated-gif:2.5.0'
现在,GIF 已经在我的 Android 上正常工作了。
您可以从他们的网站检查最新的 Fresco 版本。
0.67.1
。谢谢。 - Mahdieh ShavandiReact 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
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}
/>
)
对于react-native": "0.68.2"
这个版本,它对我来说是可行的。
implementation 'com.facebook.fresco:animated-gif:2.6.0'
FRESCO_VERSION
(https://github.com/facebook/react-native/blob/latest/ReactAndroid/gradle.properties)以了解最新的 React Native 版本应使用哪个版本(文档:https://reactnative.dev/docs/image)。 - velkoon<ImageBackground
source={yourSourceFile}
>
-- your content ---
</ImageBackground>
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'
}
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'
}
我通过向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'}}
/>
)};
animated-base-support
不起作用,但是animated-gif
(WebP下的第一个)可行。这是我在build.gradle
文件中添加的内容:compile "com.facebook.fresco:animated-gif:1.1.0"
。 - Ryan H.animated-base-support
和animated-gif
?我想知道animated-base-support
是否是基本要求,而animated-gif
是否只是与webp错误地分组。 - cedmansanimated-gif
。参见https://dev59.com/IFoT5IYBdhLWcg3wxx7g - Ryan H.