Как отобразить анимированный GIF-файл, загруженный с камеры, в приложении iOS React Native - PullRequest
Новая
       55

Как отобразить анимированный GIF-файл, загруженный с камеры, в приложении iOS React Native

0 голосов
/ 19 октября 2018

У меня есть собственное приложение для iOS, где я загружаю изображения из CameraRoll и отображаю их в другом виде.

Это прекрасно работает для большинства изображений, но когда изображение представляет собой анимированный GIF, изображение отображается,но это не анимация.Я хочу, чтобы можно было отображать анимированный оригинал, а не статический эскиз.

Информация об изображении, возвращаемая из CameraRoll, имеет вид: 

{
  filename: "test animated gif 1.gif",
  height: 480,
  isStored: true,
  playableDuration: 0,
  uri: "assets-library://asset/asset.GIF?id=8627D49D-CF91-414A-94DA-035F46850867&ext=GIF",
  width: 480
}

Я отображаю это в компоненте изображения: 

<Image
  source={{uri: asset.uri}
  style={{
    width: 300,
    height: 225,
    borderRadius: 15,
  }}
/>

Как я уже сказал, будет отображаться статическая версия GIF - я считаю, что это одна из автоматических миниатюр, которые iOS генерирует для изображений CameraRoll.

URI выглядит как динамическийURI-код доступа, а не ссылка на конкретный файл, а также то, что компонент Image выбирает миниатюру в соответствии с документами React Native.

Есть ли способ заставить ReactNative получить доступ к исходному файлу активов GIF?

Дополнительная информация:

  • Я могу успешно отображать анимированные GIF, загруженные из http:// URI, но это мне не помогает.
  • Я использовал другие инструменты файловой системы, такие как ReactNativeFetchBlob, для доступа к файлу или его отображения, а URI остается тем же assets-library:// URI.
  • Iпробовал другой компонент отображения изображения (response-native-fast-image), но он также просто отображает статическую версию GIF.

1 Ответ

0 голосов
/ 19 октября 2018

Это связано с тем, как вы форматируете исходный код изображения.React Native отображает сетевые образы, в основном, используя uri в источнике изображений, поэтому они могут загружаться позже, чем require.Попробуйте вместо этого использовать require. 

<Image
  source={require('/react-native/img/favicon.png')}
 />

Дополнительная информация: https://facebook.github.io/react-native/docs/image

...