反应本机更改图像源

Question

I have 10 Image component in a view and I need to change the source of image every 5000 ms. One problem is I have to change them one at a time in random. For example Image 1 will change, after 5000ms Image 6 will change, after 5000ms Image 3 will change and so on. Is there a way to do this?

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

It's an intriguing problem to solve. If you have all the images already then it makes it much easier. Here is a possible solution.

I would start by having a parent component that will do most of the heavy work in constructing the arrays needed. Let's call it GridImageView and then a child component called ChangingImage that will manage the changing images.

ChangingImage

This component needs to take a few props:

1. firstImage this is the uri to the first image that it will show.
2. nextImage this is the uri to the next image that it will show.
3. order this is a number representing when the image should change. eg 6 means it would change after 30 seconds
4. totalImages this is a number representing the number of images you are using, eg 10
5. lastImageShown this is function that will call back to the parent component so that it knows all the images have been shown (that is why we need the previous prop)

This component is basically a wrapper around Image you can do a lot of things. In here the basic idea is that each ChangingImage will have perhaps a setTimeout that will fire after a specific amount of time caused by the order prop, ie order * 5000 . If the order greater than the totalImages then you will want to tell the GridImageView that all images have now changed and you should perform a re-render to start the process again. Remember to clearTimeout if your component unmounts otherwise you could get memory leaks.

GridImageView

In this component you will want to construct three arrays.

1. The original images to show, and array of uris.
2. The randomized images to show, a randomized array of uris.
3. The order the images should be shown, order should be >= 1, this should be randomized too.

Using a similar approach to what you were doing above you could construct an array of ChangingImages passing in the required props.

You will probably want to limit the re-rendering of this component as a full re-render could cause all its children to re-render losing what you accomplished.

I hope that this gives you some ideas on how you could proceed, or even perhaps a way not to do it. It is definitely one solution and it can really be expanded upon as there are lots of things you could do with this.

Answer 2

It's simple.

Your code of image component should be like this:

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

but also you should have an array of images paths. For example:

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

And all your need is change the image path inside require statement:

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

or

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

Just paste any image index instead of 0 or 2 every 5000 ms.

That's all! :)

Also, please read the RN guide: https://facebook.github.io/react-native/docs/images