如何在React本机中显示动画Gif

Question

在您将我链接到另一个类似于这个问题的问题之前，比如this或that。我会说，我已经做了正确的答案，但我的gif不会像它应有的动画(虽然显示)。

下面是我在一个函数中所做的工作，该函数通过NavigationContainer和Stack.Navigator中的主要应用程序函数Stack.Navigator显示。(我使用在屏幕上移动，这里的上下文是按下一个按钮，它显示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.+'

(我已经检查了壁画的新实现版本2，但仍然没有帮助。我也试着从一个特定的版本中改变，但仍然不起作用)

我使用的是React原生版本0.67。(我试着在降级的同时再次启动它-它是0.66的原生版本，但仍然不起作用。)

​

​

另外，不确定这是否与这里的屏幕截图有什么关系，这是我默认的情况，打开文件后立即给我这个错误消息，但是程序即使在打开时也会启动。

通常在主App()函数中首先显示gif，但仍然是静止图像。

我该怎么办？我是说..。我还能做什么？

编辑：

我找到了解决问题的方法..。这是一个简单的例子，就是我从android中使用的模拟器的冷引导。

然而，Tadej的答案是有效的，因为视图样式对齐会给gif带来一点混乱。如果您有类似的问题，但答案没有帮助，尝试冷引导您的模拟器，甚至重新安装一个较新的.或者，使用一个真正的android手机来测试这些东西。

总之，非常感谢你的帮助，塔迪！我希望这个问题对处于我这种情况的其他人有所帮助。

Tadej Slemenšek

Answer 1

这对我有用。设置高度和宽度的图像支柱没有显示的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>
  );
};