Animated.View
- React Native kursu
- Orta seviye
- Ders 71/116
- 5 dk
Animated.View ile animasyonlu bileşen öğrenirsin.
Animated.View
Animated.View, stilini bir Animated.Value'ye bağlayabilen özel bir bileşendir. Sıradan View yerine geçer; opacity, transform gibi özellikleri animasyona uyar.
Değer değiştikçe Animated.View yerel olarak güncellenir; React yeniden çizim yapmaz. Bu yüzden animasyon akıcıdır. <Animated.View style={{ opacity: fade }} /> biçiminde kullanılır.
Stilde animated değer
Bir Animated.Value'yi stil içinde kullanmak için onu Animated.View'in style prop'una veririz: style={{ opacity: fade }}. Burada fade bir Animated.Value'dir.
Sıradan View bunu kabul etmez; yalnızca Animated.View animated değerleri stilde okur. Değer değiştikçe görünüm yerel olarak güncellenir; React tarafında çizim olmaz.
Uygulama Animated.View döndür
Bir <Animated.View style={{ opacity: fade }} /> döndür. fade zaten tanımlı bir Animated.Value'dir.
Başlangıç kodu
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
// Animated.View döndür
return null;
}Örnek çözüm
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
return <Animated.View style={{ opacity: fade }} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Animated.View etiketi
<____ style={{ opacity: fade }} /><Animated.View style={{ opacity: fade }} />Açıklama: Animated.View animated değeri stilde okur.
2 Hangi bileşen animated değeri stilde kabul eder?
- View
- Text
- Animated.View Doğru cevap
- ScrollView
Açıklama: Yalnızca Animated.View animated değeri stilde okur.
3 Animated.View kavramları
| Kavram | Anlamı |
|---|---|
Animated.View |
Animasyonlu bileşen |
opacity |
Saydamlık |
style |
Stil prop'u |
fade |
Animated değer |