Programlama Dilleri

Programlama Dilleri

React Native – ScrollView bileşenini kavramak

ScrollView içerisinde View çalışmamaktadır. Ekranın kaydırılarak kullanılmasını sağlamak için ScrollView bileşeni kullanılır. horizontal={true} özelliği ile yatayda kaydırma yaptırılabilir. Farklı Viewları kullanmak için yeni bileşen oluşturup, bir sayfada toplanarak kullanılabilir.

React Native – Dokunulabilir bileşenleri kavramak

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback bileşenleri ile dokunulabilir bileşenler tasarlayabiliriz. Uzun basma işlevini onLongPress özelliği ile kullanabiliriz.

Stil bilgisi:

React Native – Button bileşenini kavramak

Button bileşeni ile hazır butonlar ekleyebiliriz.

ile çağırdıktan sonra tıklandığı zaman yapacağı işlevi aşağıdaki şekilde yazabiliriz.

aşağıdaki şekilde:

butonlar kullanabiliriz.

React Native - TextInput, onChangeText, onSubmitEditing özelliklerini kavramak

React Native – TextInput, onChangeText, onSubmitEditing özelliklerini kavramak

Kullanıcıdan ad ve soyadını isteyip, onChangeText özelliği ile metin değiştikçe ekrana yazacak, onSubmitEditing özelliği ile enter’a veya onay tuşuna basınca ad girildi, soyad girildi şeklinde uyarı yazdıracağız.

React Native – flexDirection, alignItems, justifyContent özelliklerini kavramak

flexDirection: row özelliğini aldığı zaman yan yana, column özelliğini aldığı zaman alt alta sıralama yapar. justifyContent flex-start: alanın başlangıcından itibaren yerleştirir flex-end: alanın sonundan itibaren yerleştirir center: ortalar space-around: etrafında boşluk bırakarak yerleştirir space-between: baştan ve sondan boşluk bırakmadan yayarak…

React Native – width, height, flex özelliklerini kavramak

React Native’de sabit bir büyüklükte görünmesini istediğimiz nesnelerimize en ve boy vermek için width ve height kullanabiliriz.

Değişen ekran tasarımlarına ayak uydurmak için flex ile tasarım yapmak daha cazip duruyor. flex:1, dersek ekranda bir tane bileşen olur ve ekranı…

React Native – style özelliğini kavramak

React Native – style özelliğini kavramak

React Native’de büyün ana bileşenlere style özelliği ile stil bilgisi vererek dizayn yapabiliriz. Daha derli toplu olması için StyleSheet import edip, StyleSheet.create ile bir styles sabiti yaratıp, onu ilgili yerlerde kullanmak daha şık durabilir. Şöyle ki:

Kullanımı:

Sonuç:

React Native – state özelliğini kavramak

React Native – state özelliğini kavramak

props ile tanımladığımız değişkenler bileşenin ömrü boyunca sabit kalır demiştik, süreçte değişmesini istediğimiz parametreleri ise state ile kontrol ederiz. constructor yani kurucu/yapıcı metot içerisinde state ile tanımlanan değişken süreçte setState ile yeni değerler verilerek kullanılabilir.

Kullanımı:

Veri akışını…

React Native - props özelliğini kavramak

React Native – props özelliğini kavramak

Bir bileşen oluşturup, ona gönderdiğimiz değişkene göre bileşenin hareket etmesi için props özelliğini kullanabiliriz. Örneğin bir Selamlama sınıfı yazalım ve ismini verdiğimiz kişiye Merhaba diyelim.

Kullanımı:

props ile tanımladığımız değişkenler bileşenin ömrü boyunca sabit kalır.

React Native

React Native’de Check the render method of ‘App’. hatasını nasıl çözebiliriz?

Aşağıdaki gibi korkunç bir hata listesi geldi. Oysa yaptığım hata fazladan süslü parantez kullanmakmış 🙂 Oluşturmuş olduğum bileşeni import ederken kullandığım fazladan süslü parantez: import {Toolbar} from ‘./app/components/Toolbar/Toolbar’ yerien import Toolbar from ‘./app/components/Toolbar/Toolbar’ olmalıymış. Bileşen içinde birden fazla sınıf olursa…