反應本土：如何讓兩個圖像相互淡化？

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> 
}