android - 我需要遍历一组图像并从 native react 中一个接一个地显示它们

Question

我是 React native 的新手。 我有一组图像(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 元素或 fragment ，因此如果您需要多个图像标签，请将它们包装在 <> </> 中。 fragment 。

类似于:

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

这应该让您接近原始代码，但不会像视频那样为图像设置动画。如果这至少解决了渲染所有图像的问题，我建议为此打开另一个问题。