Заменить один компонент другим с помощью анимации

Question

Я ищу для анимации текстового поля в виде и кнопки из вида одновременно, так что это выглядит так, как текстовое поле заменяет кнопку. (Они равны по размеру и занимают одну и ту же площадь экрана).

Каков наилучший способ сделать это с помощью React Native?

На этом этапе я отрисовка кнопки, если одно из значений моего состояния ложно, и текстовое поле, если оно истинно.

Answer 1

Вы можете анимировать любое свойство стиля в native-native, используя Animated 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> 
); 
} 
}