React Native | Bölüm 2 [Bileşenler ve API'lar]

Gbmdpof

Kıdemli Üye
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.

JDl1LY.png

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.

dBGp4X.png

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.

vPp9m4.png

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.

buttonExample.png

Picker

Değerler arasında seçim yaptırabileceğiniz bir bileşen.

dBGpZn.png

Slider

Kaydırma ile sayısal veri alabileceğimiz bileşen.

3zq0Ar.png

Switch

Açık-kapalı olarak veri alabileceğiniz bir bileşen.

4zM4PY.png

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ü.

Action_Sheets.png

AlertIOS

Ekranda çıkan bir uyarı kutusu, veya kullanıcıdan veri isteyen bir bileşen.

Alerts.png

DatePickerIOS

Kullanıcıdan tarih ve saat girdisi almak için bir bileşen.

d932bb88-19b5-4ce2-bdbe-67298719699d.png

NavigatorIOS

Yukarıda gördüğümüz, nerede olduğumuzu gösteren ve geri gitmemizi sağlayan bileşen.

navigation_interface_2x_8f059f7f-2e2f-4c86-8468-7402b7b3cfe0.png

ProgressViewIOS

İşlemin ilerlemesini kullanıcıya da göstermeniz için bir ilerleme çubuğu.

1435151362_thumb.png

PushNotificationIOS

Kullanıcıya bildirim göndermenizi sağlar.

SegmentedControlIOS

Her biri bir buton işlevi gören segmentlerden oluşan yatay bir kontrol.

example.gif

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.

Y6OO4z.png

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.

dB77PV.png

DrawerLayoutAndroid

Kenarda açılan ve farklı menüler arasında geçiş yapmanızı sağlayan DrawerLayout'u renderlar.

j6QQQn.jpg

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_LO​CATION: 'android.permission.ACCESS_FINE_LO​CATION'
ACCESS_COARSE_LO​CATION: 'android.permission.ACCESS_COARSE_LO​CATION'
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.

LDOOlo.png

TimePickerAndroid

Kullanıcıdan bir zaman seçmesini isteyen bir dialog açar.

aY11nQ.png

ToastAndroid

Kullanıcılara küçük bilgi mesajları vermek için ekranın altında beliren uyarı mesajları oluşturur.

MDaaR1.png

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.

AzyyXv.jpg

ViewPagerAndroid

Viewlar arasında kaydırarak geçiş yapmanızı sağlayan bir bileşendir.

RDOORY.png

Diğer

Bazı uygulamalarda oldukça işinize yarayabilecek birkaç bileşen.

ActivityIndicator

Yuvarlak bir yükleme göstergesi.

lZbbXB.gif

Alert

İstenilen mesaj ve başlıkta, düğmelerini özelleştirebildiğiniz mesaj kutuları gösterir.

iOS üzerinde:

exampleios.gif

Android üzerinde:

exampleandroid.gif

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.

yqzzQ0.gif

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.

KeyboardAvo​idingView

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.

Lup7oq.gif

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.

5yGDLA.gif

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.

Ref​reshControl

ScrollView'a yenilemek için çekin özelliği eklemenizi sağlar.

StatusBar

Uygulamanın durum çubuğunu kontrol etmek için bir bileşen.

nlJOlg.png

WebView

Bir web sayfası içeriğini uygulamanızda göstermenizi sağlar.

oCsB7r.png

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.

9NDNE5.png

Şimdi uygulamamızın yüklenmesini bekleyelim, ve uygulamamız yüklenecektir.

nlJlGg.gif

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:

ENİGMA1

Uzman üye
31 Ocak 2016
1,962
39
Hocam ben anlamadım.
ios ve android için farklı konular ve daha detaylı bir anlatım olursa sevinirim.
gerçekten böyle kafam karıştı.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.