反应本土：如何让两个图像相互淡化？

Question

我想要两张图片在时间消逝之后淡入另一张。

到目前为止，我的想法是让一个覆盖另一个并通过时间或动画功能改变其透明度。我没有成功地格式化图像重叠。

有没有更好的方法？我如何让它们重叠？

Answer 1

<Image style={{position:'absolute'}} /> 
<Image /> 

用'绝对'设置第一个图像的位置可以使它们重叠。

这里是演示：

getInitialState: function(){ 
    return { 
    fadeAnim: new Animated.Value(0), 
    }; 
}, 
componentDidMount: function() { 
    Animated.timing(   
    this.state.fadeAnim,  
    { 
     toValue: 1, 
     duration:1000 
    }, 
).start();     
}, 
render: function() { 
    <View style={{flex:1}}> 
    <Animated.Image source={require('image!image1')} style={{width:320,height:320,resizeMode:'cover',position:'absolute'}} /> 
    <Animated.Image source={require('image!image2')} style={{width:320,height:320,resizeMode:'cover',opacity:this.state.fadeAnim}} /> 
    </View> 
}