useSharedValue
- React Native kursu
- İleri seviye
- Ders 62/83
- 5 dk
useSharedValue ile paylaşılan değer öğrenirsin.
useSharedValue
useSharedValue, UI ve JS iş parçacıkları arasında paylaşılan bir değer oluşturur. Bu değer, animasyonun temel durumudur. Örnek: const offset = useSharedValue(0). Değerin başlangıcı 0'dır; sonradan offset.value = 100 ile değiştirilebilir.
Önemli ayrım: offset.value özelliği ile okunur ve yazılır; doğrudan offset = 100 değil. Çünkü offset bir nesnedir, .value ise içindeki gerçek sayıdır. UI iş parçacığı bu değeri izler; her değişim animasyonu tetikler.
Değeri değiştirme
Paylaşılan değeri değiştirmek için .value özelliğine atama yapılır. Örnek: offset.value = 100. Bu atama UI iş parçacığını bilgilendirir; eğer bir animasyonlu stil bu değere bağlıysa, stil yeniden hesaplanır.
Animasyon eklemek için offset.value = withTiming(100) yazılır. Burada withTiming anında 100'e gitmez; belirli bir süre içinde doğrusal olarak gider. Bu, basit atamadan farklı olarak yumuşak bir geçiş sağlar. Animasyon türünü seçmek, hissi belirler.
Uygulama Paylaşılan değer tanımla
useSharedValue'u react-native-reanimated'dan içe aktar. const offset = useSharedValue(0) ile paylaşılan değer tanımla. offset.value = 100 ile ata.
Başlangıç kodu
import React from 'react';
export function useOffset() {
// offset'i tanımla ve 100 olarak ata
return offset;
}Örnek çözüm
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useOffset() {
const offset = useSharedValue(0);
offset.value = 100;
return offset;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useSharedValue parçalarını eşle
| Kavram | Anlamı |
|---|---|
useSharedValue |
Hook |
0 |
Başlangıç değeri |
.value |
Sayı özelliği |
UI thread |
Değeri izler |
2 .value neden kullanılır?
- Çünkü useSharedValue bir nesne döner
- Çünkü Animated gereksizdir
- Çünkü sayı yazılamaz Doğru cevap
- Çünkü hook kullanılamaz
Açıklama: useSharedValue bir nesne döner; .value ile sayıya erişilir.
3 Değer ataması
const offset = useSharedValue(0);
offset.____ = 100;const offset = useSharedValue(0);
offset.value = 100;Açıklama: .value özelliği sayıyı taşır.