Question

我想要在两个不同的图像之间循环。 当图像源发生变化时，我想应用交叉淡入淡出过渡。现在，它会按照我想要的每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
    })
}

我开始一个intervall repeat每隔5秒调用一次这个函数

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

最后，我有一个Image组件

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

如何使用交叉渐变动画更改源？

Answer 1

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

在新的渲染之前立即调用
componentWillUpdate（）正在收到道具或国家。以此为契机在更新发生之前执行准备。不调用此方法用于初始渲染。

因此，如果您在组件上定义此方法，请执行以下操作：

componentWillUpdate(nextProps, nextState)

你仍然可以使用this.state访问当前状态，你可以看到你的新资源将使用nextState。在这个方法中，您应该使用逻辑来使动画执行您想要的效果。

React Native如何使用交叉淡化动画更改图像源？

1 个答案: