如何在React Native中显示动画Gif

Question

在您将我链接到与此类似的另一个问题之前，例如this或that。我会说我已经完全按照答案所说的做了，但我的 gif 不会按应有的方式进行动画处理（尽管会显示）。

这是我在函数中所做的，它通过导航容器和 Stack.Navigator 中的主应用程序函数 Stack.Screen 显示。 （我使用 React Navigation 跨屏幕移动，这里的上下文是按下按钮并显示 DetailsScreen 函数的内容）

function DetailsScreen({ navigation }) {  
  return (
    <View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
      <Image source={require('./src/gif/moving.gif')} />
      <Text>Here is a gif</Text>
    </View>
  );
}

这会显示我的 gif 的第一张静态图像，但不会将其动画化。

我也已经将实现放置在 build.gradle 依赖项中，但它对我没有任何作用。我感觉问题就出在那里。

implementation 'com.facebook.fresco:fresco:1.+'

// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.+'

// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.+'
implementation 'com.facebook.fresco:webpsupport:1.+'

（我已经检查了fresco的新实现版本2，但仍然没有帮助。我也尝试从特定版本更改，仍然不起作用）

我使用的是 React Native 版本 0.67。 （我尝试在将react-native降级到0.66时再次启动它，但它仍然不起作用。）

另外，不确定这是否与此屏幕截图中的任何内容有关，这是我默认情况下的内容，并在我打开文件后立即给出此错误消息，但即使打开该程序，程序也可以正常启动

在主 App() 函数中正常执行此操作，首先显示 gif，但仍然保留为静止图像。

我该怎么办？我的意思是...我还能做什么？

编辑：

我找到了问题的解决方案...这是一个简单的案例，只需从 android studio 冷启动我正在使用的模拟器即可。

但是，Tadej 的答案是有效的，因为视图样式对齐使 gif 有点混乱。如果您遇到类似的问题并且答案没有帮助，请尝试冷启动您的模拟器，甚至重新安装较新的模拟器...或者，使用真正的 Android 手机来测试这些事情。

无论如何，非常感谢塔德吉的帮助！我希望这个问题对我的情况的其他人有所帮助。

塔德·斯莱门塞克

Answer 1

这对我有用。在 Image 属性上设置高度和宽度没有显示 gif。所以我弯曲了它并添加了 maxWidth 和 maxHeight。

const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {

  const { width } = useWindowDimensions();

  return (
    <View style={{flex: 1}}>
      <Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
    </View>
  );
};

Answer 2

只需将其放入

android/app/build.gradle

注意：- 版本不断变化，因此您必须找出兼容的版本。

// 用于动画 GIF 支持 实现 'com.facebook.fresco:animated-gif:3.3.0'