javascript - React Native 如何使用交叉淡入淡出动画更改图像源？

Question

我想在 2 个不同的图像之间循环。 当图像源发生变化时，我想应用交叉淡入淡出过渡。现在，它按照我的意愿每 5 秒更改一次背景，但是，它不会使用交叉淡入淡出效果进行过渡

我试过使用 LayoutAnimation , 但它不适用于此。

我正在使用 Expo如果这很重要。

首先，我有两个正在使用的图像

import BackgroundeOne from '../../Images/login-background1-tint.jpg'
import BackgroundeTwo from '../../Images/login-background2.jpg'

我有一组图片

 var backgrounds = [BackgroundeOne, BackgroundeTwo]

在我的状态下，我有我现在的背景

 this.state = { background: BackgroundeOne }

我有一个设置状态的函数

 changeBackground = () => {
    let currentBg = this.state.background
    let newIndex = backgrounds.indexOf(currentBg) + 1   
    let newBg = (newIndex) == backgrounds.length ? backgrounds[0] : backgrounds[newIndex] 


    this.setState({
        background: newBg
    })
}

我每 5 秒开始间隔重复调用此函数

componentDidMount() { 
setInterval( () => { 
        this.changeBackground()
     }, 5000);
}

最后，我有一个图像组件

<Image source={this.state.background} /> 

如何使用交叉淡入淡出动画更改源？

Answer 1

最好的解决方案是使用生命周期方法 componentWillUpdate。如文档 ( https://reactjs.org/docs/react-component.html#componentwillupdate ) 中所述:

componentWillUpdate() is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.

所以如果你像这样在你的组件上定义这个方法:

componentWillUpdate(nextProps, nextState)

您仍然可以使用 this.state 访问您的当前状态，并且您可以使用 nextState 查看您的新源将使用什么。在这个方法中，您应该放入您的逻辑以使动画执行您想要的。