如何在 react-native 中使用 ImageBackground 播放 gif？

Question

我有一個使用 react-native 的 ImageBackground 組件渲染的 GIF 背景圖像。 唯一的問題是 gif 沒有運行，它變成了靜態。

當我使用 Image 組件時一切正常，但我需要使用 ImageBackground 組件

    <ImageBackground
       source= {require('../../assets/img/initial_wallpaper.gif')} 
       style={{flex:1}} >                

    </ImageBackground>

使用上面的代碼靜態呈現 GIF。 當我使用在線 expo util 來測試它時，它可以使用完全相同的代碼在那里正常工作。 但是當我在我的 react-native 代碼庫中實現它時，它不起作用。 任何見解將不勝感激。 謝謝 ：）

Answer 1

Android上的GIF和WebP支持

構建自己的本機代碼時，默認情況下，Android不支持GIF和WebP。

您需要根據應用程序的需要在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 2

我在同一主題上發現了這個問題。 由此，我猜您正在運行Android嗎？ 以下內容將幫助您解決問題：

編輯您的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 3

對於像我這樣在RN 0.60 版中尋找解決方案的其他人，請嘗試在 app build.gradle 文件中添加以下內容

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

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