使用動畫替換一個組件與另一個使用動畫

Question

我正在尋找動畫文本字段到視圖和一個按鈕在視圖中同時，以便它看起來像文本字段正在替換按鈕。 （它們大小相同，佔據屏幕的相同區域）。

使用React Native動畫完成此操作的最佳方法是什麼？

此時，如果我的某個狀態值爲false，並且文本字段爲true，則呈現該按鈕。

Answer 1

您可以使用Animated API爲react-native中的任何樣式屬性設置動畫。 如果您能夠表示樣式更改序列中的更改，則Animated API可以執行此操作。例如，將不透明度從1設置爲0並且返回1會使淡出效果具有良好的淡入淡出效果。該文檔更清楚地解釋了動畫

您也可以作爲你發現選擇性渲染安裝或隱藏組件

<View style={{/*style props that need to be animated*/}} 
{ boolShowText? <Text/> : <View/> } 
</View> 

衰落例如，在反應本地文檔

class FadeInView extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    fadeAnim: new Animated.Value(0), // init opacity 0 
    }; 
} 
componentDidMount() { 
    Animated.timing(   // Uses easing functions 
    this.state.fadeAnim, // The value to drive 
    {toValue: 1},   // Configuration 
).start();    // Don't forget start! 
} 
render() { 
    return (
    <Animated.View   // Special animatable View 
     style={{opacity: this.state.fadeAnim}}> // Binds 
     {this.props.children} 
    </Animated.View> 
); 
} 
}