React Native-使用onPress制作动画/显示/隐藏组件

Question

我有这样的布局：

    state = {
        ....
        showFilterArea: false
    }

       ....

       <TouchableOpacity
           style = {styles.submitTouch}
           onPress={() => {
                if(this.showFilterArea) {
                   this.animateHeightDown();
                   this.setState({showFilterArea: false});
                }
                else {
                    this.animateHeightUp();
                    this.setState({showFilterArea: true});
                }
        }}>
            <Text style = {styles.submitText}>FILTER</Text>
        </TouchableOpacity>
    </View>
</View>
{this.state.showFilterArea &&
     <Animated.View style={{flexDirection: 'row', justifyContent: 'space-between', height: 64, transform: [
         // scaleX, scaleY, scale, theres plenty more options you can find online for this.
         { scaleY: this.state.ViewScale } // this would be the result of the animation code below and is just a number.
     ]}}>

     ....

     </Animated.View>
}

....

如您所见-我正在使用onPress道具来尝试显示具有showFilterArea条件的可动画区域-我正在尝试使用scaleY { {1}}。当我按下按钮时，一切正常，但是当我再次按下按钮时，什么也没有发生。我试图隐藏/动画第二次按下按钮时显示的区域。

更新

动画：

transform