- 23 Eyl 2016
- 2,001
- 11
Serinin bir önceki konusuna gitmek için buraya tıklayın.
React Native, içinde bir çok built-in bileşen ve API barındırıyor. Bu konuda da sık kullanılan bileşenlerden bahsedeceğim. Ayrıca, bu bileşen ve API'larla sınırlı değilsiniz. React Native topluluğu, binlerce geliştiriciden oluşuyor ve bu kişiler de kendi ihtiyaçlarına göre farklı bileşen ve API'lar oluşturuyor. Siz de eğer spesifik bir şey yapan bir kutüphane arıyorsanız, npm'de arama yapabilir veya Awesome React Native listesine bakabilirsiniz.
Temel Bileşenler
Birçok uygulamada kullanılan, bilmeniz gereken en temel bileşenlerdir.
View
Bir kullanıcı arayüzünün en temel bileşenidir. Birçok yerleşimi destekleyen ve diğer öğeleri içinde bulunduran bir bileşendir.
Text
Metin göstermek için kullanılan bileşendir. Text, iç içe kullanım (nesting), metin stilini değiştirme ve dokunmayı destekler.
Image
Resim göstermek için kullanılan bileşendir. İnternetten resim gösterme, statik resimler, geçici yerel resimler, Fotoğraflar (iOS ile birlikte gelen default fotoğraf saklama uygulaması) gibi yerel diskten ve data: şeklinde resim göstermeyi destekler.
TextInput
Klavyeden metin girdisi almak için kullanılan bileşendir. Otomatik düzeltme, otomatik baş harf büyütme, placeholder metni ve numerik klavye gibi farklı klavye türlerini destekler.
ScrollView
Birden çok bileşen ve view içerebilen kaydırılabilir bir container.
StyleSheet
CSS tarzında stilleme yapmak için kullanılan abstraction.
Örnek bir StyleSheet:
Kod:
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
Kullanıcı Arayüzü
Her platformda çalışan kullanıcı arayüz kontrolleri.
Button
Her platformda çalışan dokunmayı algılayan basit bir buton.
Picker
Değerler arasında seçim yaptırabileceğiniz bir bileşen.
Slider
Kaydırma ile sayısal veri alabileceğimiz bileşen.
Switch
Açık-kapalı olarak veri alabileceğiniz bir bileşen.
Liste Görünümü
Bunlar aynı ScrollView gibi fakat bu liste görünümü sadece görünen elementleri renderlıyor. Bu çok uzun liste verilerini gösterirken oldukça uygun, çünkü yeni elementler sayfayı kaydırırken yükleniyor. Bu yüzden uygulama açıldığında donmaar yaşanmıyor.
FlatList
ScrollView gibi, bu da fakat yukarıda bahsettiğim gibi performans açısından daha avantajlı. Ayrıca yenilemek için kaydırma, ayırıcı desteği, yatay mod ve başlık/alt bilgi desteği özellikleri var.
SectionList
Bu da FlatList gibi, ondan farkı ise bölümlere ayırabilme desteği.
iOS'e Özel Bileşen ve API'lar
ActionSheetIOS
Alt taraftan çıkan sizden işlem seçmenizi isteyen menü.
AlertIOS
Ekranda çıkan bir uyarı kutusu, veya kullanıcıdan veri isteyen bir bileşen.
DatePickerIOS
Kullanıcıdan tarih ve saat girdisi almak için bir bileşen.
NavigatorIOS
Yukarıda gördüğümüz, nerede olduğumuzu gösteren ve geri gitmemizi sağlayan bileşen.
ProgressViewIOS
İşlemin ilerlemesini kullanıcıya da göstermeniz için bir ilerleme çubuğu.
PushNotificationIOS
Kullanıcıya bildirim göndermenizi sağlar.
SegmentedControlIOS
Her biri bir buton işlevi gören segmentlerden oluşan yatay bir kontrol.
TabBarIOS
Ekranın altında gözüken ve farklı sekmeler arasında geçiş yapmanızı sağlayan bileşen. TabBarIOS.Item ile kullanın.
Android'e Özel Bileşen ve API'lar
BackHandler
BackHandler ile Android cihazlardaki geri tuşuna basıldığını algılayabilirsiniz.
Kullanım Örneği:
Kod:
BackHandler.addEventListener('hardwareBackPress', function() { //Event listenerımızı oluşturalım, bu fonkisyon o event oluştuğunda çağrılacaktır
if (!this.onMainScreen()) {
this.goBack();
return true;
}
return false;
});
DatePickerAndroid
Bir tarih seçmeniz için bir dialog oluşturur.
DrawerLayoutAndroid
Kenarda açılan ve farklı menüler arasında geçiş yapmanızı sağlayan DrawerLayout'u renderlar.
PermissionsAndroid
Bunun ile kullanıcıdan belirli izinler alabilir veya aldığınız izinleri görüntüleyebilirsiniz.
PermissionsAndroid.PERMISSION altındaki constantlar ve bunların karşılıkları:
Kod:
READ_CALENDAR: 'android.permission.READ_CALENDAR'
WRITE_CALENDAR: 'android.permission.WRITE_CALENDAR'
CAMERA: 'android.permission.CAMERA'
READ_CONTACTS: 'android.permission.READ_CONTACTS'
WRITE_CONTACTS: 'android.permission.WRITE_CONTACTS'
GET_ACCOUNTS: 'android.permission.GET_ACCOUNTS'
ACCESS_FINE_LOCATION: 'android.permission.ACCESS_FINE_LOCATION'
ACCESS_COARSE_LOCATION: 'android.permission.ACCESS_COARSE_LOCATION'
RECORD_AUDIO: 'android.permission.RECORD_AUDIO'
READ_PHONE_STATE: 'android.permission.READ_PHONE_STATE'
CALL_PHONE: 'android.permission.CALL_PHONE'
READ_CALL_LOG: 'android.permission.READ_CALL_LOG'
WRITE_CALL_LOG: 'android.permission.WRITE_CALL_LOG'
ADD_VOICEMAIL: 'com.android.voicemail.permission.ADD_VOICEMAIL'
USE_SIP: 'android.permission.USE_SIP'
PROCESS_OUTGOING_CALLS: 'android.permission.PROCESS_OUTGOING_CALLS'
BODY_SENSORS: 'android.permission.BODY_SENSORS'
SEND_SMS: 'android.permission.SEND_SMS'
RECEIVE_SMS: 'android.permission.RECEIVE_SMS'
READ_SMS: 'android.permission.READ_SMS'
RECEIVE_WAP_PUSH: 'android.permission.RECEIVE_WAP_PUSH'
RECEIVE_MMS: 'android.permission.RECEIVE_MMS'
READ_EXTERNAL_STORAGE: 'android.permission.READ_EXTERNAL_STORAGE'
WRITE_EXTERNAL_STORAGE: 'android.permission.WRITE_EXTERNAL_STORAGE'
Bunlara yetkiniz olup olmadığını check() metodu ile kontrol edebilir ve request() metodu ile de izin isteyebilirsiniz.
ProgressBarAndroid
Uygulamanın yüklendiğini veya bir işlem yapıldığını göstermek için kullanabileceğiniz bir bileşen.
TimePickerAndroid
Kullanıcıdan bir zaman seçmesini isteyen bir dialog açar.
ToastAndroid
Kullanıcılara küçük bilgi mesajları vermek için ekranın altında beliren uyarı mesajları oluşturur.
ToolbarAndroid
Bir logo, navigasyon iconu, bir başlık/alt başlık ve yapılabilecek işlem listesini gösterebilen Toolbar widget'ini renderlar.
ViewPagerAndroid
Viewlar arasında kaydırarak geçiş yapmanızı sağlayan bir bileşendir.
Diğer
Bazı uygulamalarda oldukça işinize yarayabilecek birkaç bileşen.
ActivityIndicator
Yuvarlak bir yükleme göstergesi.
Alert
İstenilen mesaj ve başlıkta, düğmelerini özelleştirebildiğiniz mesaj kutuları gösterir.
iOS üzerinde:
Android üzerinde:
Animated
İyi bir kullanıcı deneyimi için animasyonlar çok önemlidir. Bu kütüphane de bu gibi animasyonları yapmayı oldukça kolaylaştırıyor. Bunun ile View, Text, Image, ScrollView veya Animated.createAnimatedComponent() ile oluşturduğunuz kendi bileşenlere solma gibi animasyonlar uygulayabilirsiniz.
CameraRoll
Fotoğraflara erişmenizi sağlar. iOS 10 veya sonrası için NSPhotoLibraryUsageDescription ve iOS 11 ve sonrası için NSPhotoLibraryAddUsageDescription anahtarlarını Info.plist'e eklemeniz gerekmektedir.
Clipboard
Clipboard'dan kopyalanmış veriyi almanızı veya oraya veri kopyalamanızı sağlar.
Dimensions
Cihazın boyutlarını almanızı sağlar.
KeyboardAvoidingView
Bazen klavyenin erkandaki yazıların üstüne geçmesi oldukça rahatsız olabiliyor. Bu bileşenle bu sorundan kurtulabiliyoruz. Klavye açıldığında, ekran boyutunu klavyeye göre belirliyor.
Linking
Uygulamaya gelen ve dışarı giden uygulama linkleri ile etkileşime geçmenize yardımcı oluyor.
Modal
Gizlenip normale çevirilebilen, içeriklerinizi içine yerleştirebileceğiniz bir panel.
PixelRatio
Farklı boyutlardaki cihazlara (tabletler, telefonlar, etc.) daha iyi bir deneyim ve kullanıcı arayüzü sunmak için cihazların boyutlarına göre pixel boyutunu almanızı sağlar.
RefreshControl
ScrollView'a yenilemek için çekin özelliği eklemenizi sağlar.
StatusBar
Uygulamanın durum çubuğunu kontrol etmek için bir bileşen.
WebView
Bir web sayfası içeriğini uygulamanızda göstermenizi sağlar.
Bunları Kullanarak Bir Uygulama Yapalım
Evet, artık bileşenleri biliyoruz fakat bunları nasıl uygulamamıza ekleyeceğiz? Bunu anlatmak için basit bir tıklama sayacı yapalım.
Öncelikle React ve React Native'den gerekli importları yapalım.
Kod:
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native"; //Bileşenlerimizi burada import ediyoruz
Şimdi, gerekli şeyleri import ettiğimize göre asıl programımızı yazmaya başlayabiliriz. App.js dosyasını açalım. Sonrasında sınıfımızı oluşturup constructor oluşturalım ve orada kullanacağımız değişkenleri tanımlayalım.
Kod:
export default class App extends Component {
constructor(props) {
super(props); //this kullanabilmemiz için bu gerekli
this.state = {
count: 0 //tıklama sayısı
};
}
//...
}
Evet, şu an count değişkenini tanımladık. Artık programın renderlanacak kısmına geçebiliriz. Bunları render() metodunun içine yazıyoruz. Şimdilik style kısmını görmezden gerebilirsiniz. styles değişkenini birazdan tanımlayacağız
Kod:
//..
render() {
return (
<View style={styles.container}> // Ana view
<Text>{this.state.count}</Text> //Tıklama sayısını gösteren metin
<Button
title="Arttır"
onPress={() => this.setState({ count: this.state.count + 1 })}
/> //Arttır yazısına sahip tıklanınca tıklama sayısını 1 arttıran bir buton
<Button
title="Azalt"
onPress={() => this.setState({ count: this.state.count - 1 })}
/> //Azalt yazısına sahip tıklanınca tıklama sayısını 1 azaltan bir buton
</View>
);
//..
Son olarak da <View style={styles.container}> kısmında kullandığımız styles StyleSheet'imizi tanımlayalım.
Kod:
//..
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
}
});
Artık programımız hazır olduğuna göre telefonumuzda Expo ile çalıştırabiliriz.
Şimdi, program dizinine gidip npm start yazalım ve uygulamamızın yüklenmesini bekleyelim. Yüklendiğinde eğer cihazımız Android ise bu QR kodu okutun. iOS ise, Safari'ye oradaki exp:// ile başlayan URL'i girin ve Expo açılacaktır.
Şimdi uygulamamızın yüklenmesini bekleyelim, ve uygulamamız yüklenecektir.
Gördüğünüz gibi uygulamamız güzel bir şekilde çalışıyor. Siz de kendiniz çalıştırmak isterseniz tüm kodlara buradan erişebilirsiniz.
Son düzenleme: