React Native, Facebook’un geliştirmiş olduğu mobil uygulama yazmak için yapılmış bir programlama çatısıdır. GitHub’ta 24/07/2018 tarihi ile 66.704 yıldızı bulunuyor ki bu çok büyük bir kitlenin React Native’i takip ettiğini ve kullandığını gösterir. React Native, sizin JavaScript yazarak native çıktı almanızı sağlar. Diğer web-view yaklaşımları dışında corss-platform’a native çıktısı almanız için çok güzel bir ortam.
Peki Nasıl?
Reac Native ile EcmaScript 6 ve EcmaScript 7’yi kullanırız. Tarayıcıların çoğu EcmaScript 5’i tanır bu yüzden bizim yazdığımız ES6 ve ES7 kodlarımızı ES5’e çeviren babel.js denilen bir kütüphane bulunur, bizde bu kütüphane sayesinde yeni söz dizimiyle yazar ve rahatlıkla çalışırız.
Örnek olarak;
//ES5 //ES6
function helloworld(){ function helloworld(){
this.msg = “Hello World”; this.msg = “Hello World”;
this.hello = function(params){ this.hello = (params) => {
return this.msg + hello return this.msg + hello
}.bind(this) }
} }
Görüldüğü üzere fonksiyon kavramı ES6 ile değişmiştir. Arrow function olarak adlandırılmıştır ve
= (params) => {} şeklinde kullanılır buda dış fonksiyonuda kapsadığı için dış fonksiyonu bind etmememize olanak sağlamaktadır. Ayrıca bu örnekte de aynı zamanda fonksiyonun nasıl parametre aldığınıda görüyoruz.
ES6-7 ile artık React Native’de de kullandığımız yeni değişken tanımlama şekilleri oluşmuştur.
JavaScript’te var olarak kullandığımız değişkenin yanına artık let ve const’da eklenmiştir. Const, yalnızca bulunduğu blok içinde geçerlidir ama let’e ile tanımladığınız bir değişkene tekrar atama yapabilirsiniz.
Örnek olarak;
const foo = “Hello Wolrd”;
let zoo = “World Hello”;
//hata yok
zoo = “Türkiye”;
//hata
foo = “Türkiye”
//hata yok
if(true){
foo = “Türkiye”;
}
React Native’de UI için React JS’i kullanırız.
Props Mantığı;
React JS’te props mantığı şu şekildedir.
const variable = (props) => {
return(
<button> { props.text } </button>
)
}
Dışardan text adında olan bir inputtan aldığı değeri döndüren bir fonksiyon.
State Mantığı;
State fonksiyonların tekrar render edilmesini sağlayan React JS’in bir değişkenidir. State yalnızca constructor içinde tanımlanır. State çalışabilmesi için fonskiyonumuzda render() metodunun olması gerekir.
Örnek olarak;
class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
open:false
};
}
}
React Native’in bir DOM yapısı olmadığında geliştiricler bu yapıya benzer bir başka yapı kurmşular.
Örnek olarak;
<div> için <View>
<button> için <Button>
<input> için <TextInput> olarak yapılmıştır.
React Navite’de style ile çalışmak gayet eğlencelidir. Tıpkı HTML’de bir <div> in yada <label> ın tag içinden style verebildiğimiz gibi React Native’de de DOM elemanları üzerinden yada dışardan oluşturduğumuz kendi fonksiyonumuzdan style’rimizi aktarabiliriz.
Örnek olarak;
DOM elemanının içinde
const func = () => {
return(
<View>
<Text style={ “backgroundColor”:”blue”, “fontSize”:”16” }></Text>
</View>
)
}
Şeklindedir.
Ayrı fonksiyon olarak
const func = () => {
return(
<View>
<Text style={ styles.text }></Text>
</View>
)
}
const styles = {
text:{
backgroundColor:”white”,
fontSize:20
}
}
Şeklindedir.
Bu örnekler üzerinden nasıl bir componenti import ettiğimizde görelim.
<Text> veya <View> DOM elemanlarımızı kullanmak istiyorsak
sayfanın başına
import React, { Component } from ‘react’;