如何在React Native中显示动画Gif

Question

在你把我和另一个类似的问题联系起来之前，比如这个或那个。我要说的是，我完全按照答案所说的做了，但我的gif不会像它应该做的那样动画化（尽管它是显示出来的）。

下面是我在一个函数中所做的操作，该函数通过主应用程序函数堆栈显示。导航容器和堆栈中的屏幕。导航器。（我使用React导航在屏幕上移动，这里的上下文是按下一个按钮，它显示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的第一个静态图像，但不会对其设置动画。

我也已经着手将实现放在构建中了。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工作室使用。

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

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

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>
  );
};