React Native - использование onPress для анимации / отображения / скрытия компонента - PullRequest
Новая
       14

React Native - использование onPress для анимации / отображения / скрытия компонента

0 голосов
/ 18 сентября 2018

У меня есть этот макет: 

    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 transform.Когда я нажимаю кнопку, все работает как положено, но когда я нажимаю ее снова, ничего не происходит.Я пытаюсь скрыть / анимировать область, показанную при повторном нажатии кнопки.

ОБНОВЛЕНИЕ

Анимация: 

  animateHeightUp = () => {
    console.log("animateHeight");

    Animated.timing(                    // Animate over time
      this.state.ViewScale,             // The animated value to drive, this would be a new Animated.Value(0) object.
      {
        toValue: 1,                   // Animate the value
        duration: 300,                 // Make it take a while
      }
    ).start();
  }

  animateHeightDown = () => {
    console.log("animateHeight");

    Animated.timing(                    // Animate over time
      this.state.ViewScale,             // The animated value to drive, this would be a new Animated.Value(0) object.
      {
        toValue: 0,                   // Animate the value
        duration: 300,                 // Make it take a while
      }
    ).start();
  }
...