Как отобразить анимированный gif в React Native?

Как я могу отобразить анимированный gif в реакции native. Это то, что я пробовал.

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

Он отлично работает с файлом .png, но когда я использую файл .gif, он пуст. Я где-то читал, чтобы попробовать переименовать .gif в .png, но это просто отображает один кадр анимированного gif без анимации. Любые идеи?

Ответ 1

Для RN & lt; 0.60

По умолчанию изображения Gif не поддерживаются в Android-приложении. Вам нужно настроить использование Фреска для отображения изображений 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

Я надеюсь, что это полезно для других,

Ответ 2

Вам нужно добавить расширение и потребовать его следующим образом:

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

или

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

RN обрабатывает наилучшие изображения gif, проверьте этот пример.

Ответ 3

Для Android нужно добавить библиотеку фресок Facebook

React Native не поставляется с поддержкой Gif из коробки, но вы можете добавить библиотеку Facebook Fresco, чтобы добавить эту поддержку.

Вы должны иметь возможность просто добавить следующее в свой файл build.gradle:

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

Совместимость с определенной версией

Если у вас возникли проблемы или вы хотите использовать статическую версию (настоятельно рекомендуется), вы можете просто перейти на следующую страницу документации React Native и заменить 0.46 в URL-адресе версией React Native, которую вы используете:

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

Ответ 4

если вы хотите использовать GIF в качестве фонового изображения, чем вы можете использовать

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

Ответ 5

Чтобы добавить 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'
}