React Native - Animations

Dans ce chapitre, nous allons vous montrer comment utiliser LayoutAnimation dans React Native.

Composant Animations

Nous allons définir myStyleen tant que propriété de l'État. Cette propriété est utilisée pour styliser un élément à l'intérieurPresentationalAnimationComponent.

Nous allons également créer deux fonctions - expandElement et collapseElement. Ces fonctions mettront à jour les valeurs de l'état. Le premier utilisera lespring animation prédéfinie tandis que la seconde aura le linearpréréglé. Nous les passerons également comme des accessoires. leExpand et le Collapse les boutons appellent le expandElement() et collapseElement() les fonctions.

Dans cet exemple, nous modifierons dynamiquement la largeur et la hauteur de la boîte. Depuis leHome le composant sera le même, nous ne changerons que le Animations composant.

App.js

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {
   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'blue',
      width: 50,
      height: 100
   }
})