react-native-reanimated
- React Native kursu
- İleri seviye
- Ders 61/83
- 5 dk
react-native-reanimated kütüphanesini öğrenirsin.
react-native-reanimated
react-native-reanimated, React Native için yüksek performanslı animasyon kütüphanesidir. Animasyonları UI iş parçacığında (thread) çalıştırır; böylece JavaScript köprüsünü bloklamaz. Akıcı 60 fps animasyonlar sağlar. Kurulum: npx expo install react-native-reanimated.
Temel yapı taşları: useSharedValue (paylaşılan değer), useAnimatedStyle (animasyonlu stil), withTiming (zamanlama) ve withSpring (yay). Bunları birlikte kullanarak düğme basılması, kaydırma, kart çevirme gibi akıcı animasyonlar yazarsın. Reanimated, modern React Native projelerinin varsayılan animasyon aracıdır.
Temel yapı taşları
Reanimated'in dört temel işlevi vardır. useSharedValue, UI ve JS iş parçacıkları arasında paylaşılan bir değer oluşturur; animasyonun temel durumu budur. useAnimatedStyle, bu değere göre animasyonlu bir stil nesnesi üretir.
withTiming ve withSpring, değeri hedefe götüren animasyon türleridir. withTiming sabit sürede doğrusal gider; withSpring ise fiziksel yay gibi sektirir. Bir kartı döndürürken withSpring doğal hiss verir; bir opaklık değişiminde withTiming tercih edilir.
Uygulama Reanimated'i içe aktar
Boş dosyayı tamamla. Animated'i react-native-reanimated'dan içe aktar. export { Animated } ile dışa aktar.
Başlangıç kodu
// react-native-reanimated'den Animated'i içe aktar ve dışa aktarÖrnek çözüm
import { Animated } from 'react-native-reanimated';
export { Animated };Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Reanimated animasyonları nerede çalışır?
- Yalnızca JavaScript iş parçacığında
- UI iş parçacığında Doğru cevap
- Yalnızca ağ tarafında
- Yalnızca dosya sisteminde
Açıklama: Reanimated UI iş parçacığında çalışır; JavaScript'i bloklamaz.
2 Kütüphaneyi içe aktar
import ____ from 'react-native-reanimated';import Animated from 'react-native-reanimated';Açıklama: Animated ad alanı animasyonlu bileşenleri taşır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useSharedValue |
Paylaşılan değer |
useAnimatedStyle |
Animasyonlu stil |
withTiming |
Doğrusal zamanlama |
withSpring |
Yay animasyonu |