useAnimatedStyle

useAnimatedStyle ile animasyonlu stil öğrenirsin.

useAnimatedStyle

useAnimatedStyle, paylaşılan değere göre animasyonlu bir stil nesnesi üretir. Dönen stil, Animated.View'in style prop'una verilir. Örnek: const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] })).

İşlev içinde .value okunur ve bir stil nesnesi döndürülür. Bu stil, değer değiştikçe UI iş parçacığında otomatik yeniden hesaplanır. JavaScript tarafında render tetiklenmez; bu yüzden animasyonlar çok akıcıdır.

Animated.View ile kullanım

Animasyonlu stili uygulamak için Animated.View'in style prop'una verilir. Örnek: <Animated.View style={[styles.box, animatedStyle]} />. Burada styles.box statik, animatedStyle dinamik stilleri taşır. İkisi birleştirilir.

Stillerin bir dizi içinde verilmesi önemlidir; bu sayede hem sabit hem animasyonlu stiller birlikte çalışır. Animated.View, normal View'ın animasyonlu sürümüdür; UI iş parçacığında güncellenir.

Uygulama Animasyonlu stili yaz

useAnimatedStyle'ı react-native-reanimated'dan içe aktar. const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] })) ile animasyonlu stil üret. offset'i useSharedValue(0) ile tanımla.

Örnek çözümü göster

import React from 'react';
import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

export function useMove() {
  const offset = useSharedValue(0);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return { offset, animatedStyle };
}

Kendini test et

useAnimatedStyle çağrısı

const animatedStyle = ____(() => ({ transform: [{ translateX: offset.value }] }));

Cevabı göster

const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] }));

Stil parçalarını eşle

useAnimatedStyle

Stil üretir
Animated.View

Stili uygular
translateX

Yatay kaydırma
offset.value

Stil kaynağı
Animated.View neden tercih edilir?
- Çünkü UI iş parçacığında güncellenir
- Çünkü hook değildir
- Çünkü stilleri siler
- Çünkü daha az bellek kullanır
Cevabı göster

Çünkü daha az bellek kullanır — Animated.View UI iş parçacığında güncellenir; akıcıdır.

Sıradaki ders: withTiming

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler