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生成的CameraRoll图像的自动缩略图之一。

根据React Native文档，URI似乎是动态访问器URI，而不是指向特定文件的链接，并且Image组件正在选择缩略图。

是否可以强制ReactNative访问GIF的原始资产文件？

其他信息：

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

Answer 1

这与格式化图像源代码的方式有关。 React Native主要在图像源中使用uri来渲染网络图像，因此它们可以比使用require来晚加载。尝试使用require代替。

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

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

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

1 个答案: