React Native – Bài 14: Animations

Nếu bạn đang phát triển ứng dụng bằng React Native, muốn sử dụng các animations nhưng lại chưa biết về LayoutAnimation, có lẽ đó thật sự là 1 thiếu sót.

Animations Component

Chúng tôi sẽ đặt myStyle làm thuộc tính của trạng thái. Thuộc tính này được sử dụng để tạo kiểu cho phần tử bên trong PresentationalAnimationComponent .

Chúng tôi cũng sẽ tạo hai chức năng – expandElement và crashElement . Các chức năng này sẽ cập nhật các giá trị từ trạng thái. Cái đầu tiên sẽ sử dụng hình ảnh động đặt trước lò xo trong khi cái thứ hai sẽ có cài đặt trước tuyến tính . Chúng tôi cũng sẽ chuyển những thứ này làm đạo cụ. Các nút Mở rộng và Thu gọn gọi các hàm expandElement() và collapElement( ) .

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. Vì thành phần Trang chủ sẽ giống nhau nên chúng tôi sẽ chỉ thay đổi thành phần Ảnh động .

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