रिएक्टिव नेटिव - एनिमेशन

इस अध्याय में, हम आपको बताएंगे कि कैसे उपयोग करना है LayoutAnimation रिएक्टिव नेटिव में।

एनिमेशन घटक

हम सेट करेंगे myStyleराज्य की संपत्ति के रूप में। इस संपत्ति का उपयोग किसी तत्व को स्टाइल करने के लिए किया जाता हैPresentationalAnimationComponent।

हम दो कार्य भी करेंगे - expandElement तथा collapseElement। ये फ़ंक्शन राज्य से मूल्यों को अपडेट करेंगे। पहले वाला उपयोग करेगाspring प्रीसेट एनीमेशन जबकि दूसरा वाला होगा linearपूर्व निर्धारित। हम इन्हें प्रॉपर के रूप में भी पास करेंगे। Expand और यह Collapse बटन कॉल expandElement() तथा collapseElement() कार्य करता है।

इस उदाहरण में, हम गतिशील रूप से बॉक्स की चौड़ाई और ऊंचाई को बदल देंगे। के बाद सेHome घटक समान होगा, हम केवल परिवर्तन करेंगे Animations घटक।

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
   }
})