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?

View

PreviousTemel Component'lerNextText

Last updated 5 years ago

Was this helpful?

Belki de en temel component. Android'deki android.view, IOS'daki UIView. HTLM'deki karşılığı div diyebiliriz. Ekranımızı temel anlamda şekillendiren UI elementi.

tüm propslarını görebilirsiniz. Zaten yapacağımız örneklerde bir çok kez kullanacağız. Burada gözden kaçabilecek bir özelliğinden bahsetmek istiyorum.

View componenti mount edilir edilmez, onLayout eventi tetiklenir.

<View  onLayout={this._handleLayout} />

Burada fonksiyonumuzun bir tane obje tipinde parametresi olur.

_handleLayout=(e)=>{
   const { x, y, width, height } = e.nativeEvent.layout
}

Burada Vİew componentimizin, parent elemente göre x ve y konumunu, genişlik ve uzunluk bilgilerine erişebilirsiniz. Animasyon kısmında göreceğimiz, LayoutAnimation yöntemini kullanırken bayağı işe yarıyor.

Resmi dökümanda