Çözüldü: yerel döndürme tepkisi

Son Güncelleme: 09/11/2023
Yazar: JavaScript Kaynak Yolu

React native rotate ile ilgili temel sorun, çoğu cihaz tarafından yeterince desteklenmemesidir. Bu, cihazınızda düzgün çalışmayabileceği veya hiç kullanılamayacağı anlamına gelir.

 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:&#91;{rotate:'360deg'}&#93; }} > {this.props.children} </Animated.View> ); } }

Bu kod satır satır:

React'i içe aktarın, { Bileşen } 'tepki'den; 'react-native'den { Animasyonlu, Metin, Görünüm } içe aktarın; class FadeInView, Bileşeni genişletir { state = { fadeAnim: new Animated.Value(0), // Opaklık için başlangıç ​​değeri: 0 } componentDidMount() { Animated.timing( // Zamanla canlandırın this.state.fadeAnim, // Animasyonlu sürücü değeri { toValue: 1, // Animasyondan opaklığa: 1 (opak) süre: 10000, // Biraz zaman alsın }, .start(); // Animasyonu başlatır } render() { let { fadeAnim } = this.state; dönüş ( {this.props.children} ); } }

Dönüşümler

React Native'de gerçekleştirilebilecek birkaç dönüşüm türü vardır. Bunlar şunları içerir:

Düzen dönüşümleri: Bunlar, uygulamanın düzenini değiştirir. Örneğin, uygulama penceresinin yüksekliğini veya genişliğini değiştirebilirsiniz.

Animasyon dönüşümleri: Bunlar, bir öğenin zaman içinde hareket ederken nasıl göründüğünü değiştirir. Örneğin, bir öğenin opaklığını değiştirebilir veya onu farklı bir şekle dönüştürebilirsiniz.

Durum yönetimi dönüşümleri: Bunlar, uygulamanın yüklenirken veya kullanıcı tarafından etkileşim kurulurken olduğu gibi farklı durumlarda nasıl davranacağını değiştirir.

Animasyon kullanarak görüntüyü döndürme

React Native'de, bir görüntüyü döndürmek için Animasyon bileşenini kullanabilirsiniz.

Öncelikle Animasyon bileşenini içe aktarmanız gerekir.

{ Animasyon } 'u 'react-native'den içe aktarın

Ardından, yeni bir Animation örneği oluşturmanız gerekir.

animasyona izin ver = yeni Animasyon()

Animation.fromRect(0, 0, 100, 100) // Animasyonun başlangıç ​​noktasını ayarlar. Animation.toRect(50, 50, 150, 150) // Animasyonun bitiş noktasını ayarlar. Animation.duration = 1000 // Animasyonun milisaniye cinsinden ne kadar süreceğini ayarlar.

İlgili Mesajlar: