React Native - Hoạt ảnh

Trong chương này, chúng tôi sẽ hướng dẫn bạn cách sử dụng LayoutAnimation trong React Native.

Thành phần ảnh động

Chúng tôi sẽ thiết lập myStylevới tư cách là tài sản của nhà nước. Thuộc tính này được sử dụng để tạo kiểu cho một phần tử bên trongPresentationalAnimationComponent.

Chúng tôi cũng sẽ tạo hai hàm - expandElement và collapseElement. Các hàm này sẽ cập nhật các giá trị từ trạng thái. Cái đầu tiên sẽ sử dụngspring hoạt ảnh đặt trước trong khi cái thứ hai sẽ có linearđặt trước. Chúng tôi cũng sẽ chuyển những thứ này làm đạo cụ. CácExpand và Collapse các nút gọi expandElement() và collapseElement() chức năng.

Trong ví dụ này, chúng tôi sẽ tự động thay đổi chiều rộng và chiều cao của hộp. Kể từ khiHome thành phần sẽ giống nhau, chúng tôi sẽ chỉ thay đổi Animations thành phần.

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