Animated.View

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.

Örnek çözümü göster

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 }} />;
}

Kendini test et

Animated.View etiketi

<____ style={{ opacity: fade }} />

Cevabı göster

<Animated.View style={{ opacity: fade }} />

Hangi bileşen animated değeri stilde kabul eder?
- View
- Text
- Animated.View
- ScrollView
Cevabı göster

Animated.View — Yalnızca Animated.View animated değeri stilde okur.
Animated.View kavramları

Animated.View

Animasyonlu bileşen
opacity

Saydamlık
style

Stil prop'u
fade

Animated değer

Sıradaki ders: Animated.timing

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler