アニメーションを使用して1つのコンポーネントを別のコンポーネントに置き換えます。

Question

テキストフィールドをボタンに置​​き換えて表示するように、テキストフィールドを表示と非表示に同時にアニメーション化したいと考えています。 （両者は同じサイズで、画面の同じ領域を占有します）。

リアクションネイティブアニメーションを使用してこれを行う最善の方法は何ですか？

私の状態値の1つがfalseの場合はボタンをレンダリングし、それがtrueの場合はテキストフィールドをレンダリングしています。

Answer 1

アニメーションAPIを使用して、反応ネイティブのスタイルプロパティをアニメーション化できます。 一連のスタイル変更で変更を表すことができる場合、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> 
); 
} 
}