ChangingImage

Question

我在视图中有10个图像组件，我需要每5000毫秒更改一次图像源。一个问题是我必须一次随机更改一个。例如，图像1将更改，在5000毫秒后图像6将更改，在5000毫秒后将更改图像3，依此类推。有办法吗？

render() {

let image_containers = []

for(let i = 0; i < 30; i++){

    let rand = Math.floor(Math.random() * 29 + 0)

    image_containers.push(<Animated.Image

                      key={i}
                      style={{
                                  opacity:1,
                                  margin:'.11%',
                              width: '33%',
                              height: 90}}
                          source={{uri: this.state.images_random[i]}}

                  />);

}

return (

    <View style={styles.image_container}>

        {image_containers}

    <View style={styles.overlay}></View>

    </View>

)

}

Answer 1

这是一个有趣的问题。如果你把所有的图片已经那么它使得它更容易。这是一个可能的解决方案。

我会通过具有一个父组件，将做最繁重的工作在构建所需要的阵列开始。让我们把它叫做GridImageView然后叫一个子组件ChangingImage将管理不断变化的图片。

ChangingImage

此组件需要采取一些道具：

firstImage是这种uri的第一图像，这将显示。
nextImage是这种uri到下一个图像，它会显示。
order这是一个数字，代表图像何时应更改。例如，6手段，将在30秒后改变
totalImages这是表示使用的是图像的数量的数，例如，10
lastImageShown该函数将回调到父组件，以便知道所有图像均已显示（这就是为什么我们需要上一个道具的原因）

此组件基本上是一个包装周围Image可以做很多事情。这里的基本思想是，每个ChangingImage都有可能一个setTimeout，它将在order道具（即{ {1}}。如果order * 5000大于order，那么您将要告诉totalImages所有图像现在都已更改，应该执行重新渲染以重新开始该过程。 记住GridImageView如果组件卸除，否则你可以得到内存泄漏。的

GridImageView

在此组件你将要构建三个阵列。

要显示的原始图像和uris数组。
的随机的图像来显示，URI的随机阵列。
图像应该显示的顺序，顺序应该是> = 1，这也应该被随机化。

使用类似的方法来你上面你在做什么可以构建的阵列clearTimeout传递所需的道具。

您可能希望限制此组件的重新渲染，因为完全重新渲染可能会导致其所有子代重新渲染，从而失去您的成就。

我希望这会给您一些有关如何进行的想法，甚至可能是不这样做的一种方法。这绝对是一种解决方案，并且可以扩展，因为您可以用它做很多事情。

Answer 2

很简单。

您的图像组件代码应如下：

<Image source={require('./my-icon.png')} />

，但是您还应该具有图像路径数组。例如：

let images = ['./my-icon-1.png', './my-icon-2.png', './my-icon-3.png']

所有您需要的是更改require语句中的图像路径：

<Image source={require(images[0])} />

或

<Image source={require(images[2])} />

只需每5000毫秒粘贴任何图像索引，而不是粘贴0或2。

仅此而已！：）

另外，请阅读RN指南：https://facebook.github.io/react-native/docs/images

响应图像的本机更改源

2 个答案:

ChangingImage

GridImageView