如何在iOS React本机应用程序中显示从相机卷加载的动画GIF

Question

我有一个iOS react本机应用程序，我从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生成的相机卷图像。

URI看起来像是一种动态访问器类型的URI，而不是指向特定文件的链接，并且根据React Native docs，图像组件正在拾取缩略图。

有没有办法强制ReactNative访问GIF的原始资产文件？

其他信息：

• 我可以成功显示从URI加载的动画GIF，但这对我没有帮助
• 我探索了使用其他文件系统工具（如ReactNativeFetchBlob）来访问或显示文件，并且URI保持不变
• 我尝试了不同的图像显示组件（react native fast image），但这也只是显示GIF的静态版本

Answer 1

这与您如何格式化图像源代码有关。React Native主要使用图像源中的uri呈现网络图像，因此它们可以在使用的时间之后加载。尝试使用要求代替。

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

更多信息：https://facebook.github.io/react-native/docs/image