useAnimatedStyle
- React Native kursu
- İleri seviye
- Ders 63/83
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useMove() {
const offset = useSharedValue(0);
// animatedStyle'i useAnimatedStyle ile tanımla
return { offset, animatedStyle };
}Örnek çözüm
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 };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useAnimatedStyle çağrısı
const animatedStyle = ____(() => ({ transform: [{ translateX: offset.value }] }));const animatedStyle = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] }));Açıklama: useAnimatedStyle animasyonlu stil üretir.
2 Stil parçalarını eşle
| Kavram | Anlamı |
|---|---|
useAnimatedStyle |
Stil üretir |
Animated.View |
Stili uygular |
translateX |
Yatay kaydırma |
offset.value |
Stil kaynağı |
3 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 Doğru cevap
Açıklama: Animated.View UI iş parçacığında güncellenir; akıcıdır.