我需要循环浏览一组图像，并从 react native 一个接一个地显示它们

Question

我是React 原生的新手。 我有一组图像(1.png，2.png，3.png....20.png)。我想循环显示这些图像一个接一个，所以它看起来像前端的视频。我尝试了一些编码，但失败了。有人可以帮我解决这个问题吗？

我想创建这样的东西：

class BasicStructure extends Component{
render(){
return()=>{
for (let i = 1; i < 20; i++) {
<Image source={require(`./assets/imageLoop/${i}.png`)}>
</Image>
}
}
}
}

但这行不通。

Answer 1

React Native 不允许动态路径到静态图像资源。见 https://facebook.github.io/react-native/docs/images#static-image-resources

因此，您需要先require所有图像。

其次，您必须从渲染函数返回单个 jsx 元素或片段，因此，如果您需要多个图像标记，请将它们包装在一个<> </>片段中。

像这样：

const images = [
require('./assets/imageLoop/1.png'),
require('./assets/imageLoop/2.png'),
...
require('./assets/imageLoop/19.png'),
];
class BasicStructure extends Component{
render(){
return (
<>
{images.map(img => <Image source={img} />)}
</>
);
}
}

这应该会让你接近你的原始代码，但不会像视频一样对图像进行动画处理。如果这至少解决了渲染所有图像的问题，我建议为此提出另一个问题。

Answer 2

如果要在单个视图中使用多个图像，请点击以下链接。

https://www.npmjs.com/package/react-native-image-sequence

这可能会对您有所帮助。