Vấn đề chính với phản ứng xoay gốc là nó không được hầu hết các thiết bị hỗ trợ tốt. Điều này có nghĩa là nó có thể không hoạt động chính xác trên thiết bị của bạn hoặc hoàn toàn không có sẵn.
animation
import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Component { state = { fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 } componentDidMount() { Animated.timing( // Animate over time this.state.fadeAnim, // The animated value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Make it take a while }, ).start(); // Starts the animation } render() { let { fadeAnim } = this.state; return ( <Animated.View // Special animatable View style={{ ...this.props.style, opacity: fadeAnim, transform:[{rotate:'360deg'}] }} > {this.props.children} </Animated.View> ); } }
Mã này từng dòng:
nhập Phản ứng, { Thành phần } từ 'phản ứng'; nhập {Hoạt ảnh, Văn bản, Chế độ xem} từ 'reac-igen'; lớp FadeInView mở rộng Thành phần { state = { fadeAnim: new Animated.Value(0), // Giá trị ban đầu cho độ mờ: 0 } componentDidMount() { Animated.timing( // Hoạt hình theo thời gian this.state.fadeAnim, // Hoạt hình giá trị cho ổ đĩa { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Làm mất một lúc }, ).start(); // Bắt đầu hoạt hình } render() { let { fadeAnim } = this.state; trở lại (
Biến đổi
Có một số loại biến đổi có thể được thực hiện trong React Native. Bao gồm các:
Chuyển đổi bố cục: Những thay đổi này làm thay đổi bố cục của ứng dụng. Ví dụ: bạn có thể thay đổi chiều cao hoặc chiều rộng của cửa sổ ứng dụng.
Biến đổi hoạt hình: Những thay đổi này làm thế nào một phần tử dường như di chuyển theo thời gian. Ví dụ: bạn có thể thay đổi độ mờ của phần tử hoặc chuyển đổi phần tử đó thành một hình dạng khác.
Chuyển đổi quản lý trạng thái: Những thay đổi này sẽ thay đổi cách ứng dụng hoạt động khi ứng dụng ở các trạng thái khác nhau, chẳng hạn như khi ứng dụng đang tải hoặc khi người dùng tương tác với ứng dụng.
Xoay hình ảnh bằng Animation
Trong React Native, bạn có thể sử dụng thành phần Animation để xoay hình ảnh.
Trước tiên, bạn cần nhập thành phần Hoạt hình.
nhập { Animation } từ 'Reac-igen'
Tiếp theo, bạn cần tạo một phiên bản Hoạt hình mới.
để hoạt ảnh = Hoạt ảnh mới()
animation.fromRect(0, 0, 100, 100) // Đặt điểm bắt đầu của hoạt ảnh. animation.toRect(50, 50, 150, 150) // Đặt điểm kết thúc của hoạt ảnh. animation.duration = 1000 // Đặt khoảng thời gian hoạt ảnh sẽ kéo dài tính bằng mili giây.
