rnturkce
  • Introduction
  • Yararlandığım Kaynaklar
  • Babel, ES2015, ES6, ES7 Nedir ?
  • ES6 ve ES7 Örnekler
  • Fonksyionel Programlama
  • Composition
  • Composition ile React Native Örneği(Yazılacak)
  • React JS Nedir ?
  • JSX Nedir ?
  • Lifecycle Methodlar
  • Props Mantığı
  • State Mantığı
  • React Native Nedir ?
  • Installation
  • expo
  • Windows Installation
  • macOS Installation
  • Gnu/Linux Installation
  • React Native Başlangıç
  • Style ve FlexBox
  • Temel Component'ler
  • View
  • Text
  • Image
  • ScrollView
  • ListView
  • FlatList
  • Component API'lar
  • Animasyon
    • LayoutAnimation
    • Animated
      • Animated.Event( )
  • PanResponder
  • react-navigation
    • İç İçe Navigator Kullanımı
    • Header Seçenekleri( Yazılacak )
  • State Yönetimi
  • mobx
  • Redux(Yazılacak)
  • Yılan Oyunu Tutorial
  • Yılan Oyunu Part 1
  • Yılan Oyunu Part 2
  • Yılan Oyunu Part 3
  • Android Apk Oluşturma
Powered by GitBook
On this page

Was this helpful?

  1. Animasyon
  2. Animated

Animated.Event( )

Ekranı kaydırırken, scroll yaparken, Animated.Event( ) kullanılarak animated değişkeni direkt olarak değiştirebiliriz.

Örnek olarak, biz ekranı dikey olarak scroll yaparken animated değişken olan, animatedValue'yu aşağıdaki gibi değiştirebiliriz

<ScrollView
        style={styles.container}
        scrollEventThrottle={16}
        onScroll={Animated.event([
          { nativeEvent: { 
                contentOffset: { 
                    y: animatedValue  //yatay scroll için, y yerine x yazabilirsiniz
                } 
            } 
          }
        ])}
>
...

Animated.Event( ), bizim yerimize animated değişkeni, kendi içinde setValue() kullanarak değiştirmektedir.

PanResponder ile nasıl kullandığına bakalım,

onPanResponderMove: Animated.event([
   null,                // raw event'i null geçiyoruz
   {dx: this._pan.x, dy: this._pan.y},    // gestureState ,  _pan => referans
 ]),

Burada, ikinci parametre gestureState , yukarıdaki örnekte state'ler dx ve dy değerleri. Kullanıcı ekrana ilk dokunuşundan, parmağını ne kadar kaydırırsa, ardışık olarak her harekette, state'in değerini güncelleyecektir.

animated değer değiştikten sonra, onu istediğiniz gibi interpolate ederek animasyonlarınızı oluşturabilirsiniz

PreviousAnimatedNextPanResponder

Last updated 5 years ago

Was this helpful?