React Native, Facebook’un geliştirmiş olduğu mobil uygulama yazmak için yapılmış bir programlama çatısıdır GitHub’ta 24072019 tarihi ile 66704 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 webview yaklaşımları dışında corssplatform’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 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(){
thismsg “Hello World; thismsg “Hello World;
thishello function(params){ thishello (params) {
return thismsg + hello return thismsg + 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
ES67 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 { propstext } 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 ReactComponent {
constructor(props) {
super(props);
thisstate {
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;
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 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 { stylestext }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’;
import { Text, View } from ‘reactnative’;
şeklinde elemanlarımızı import etmemiz gerekir Burda ilk import ettiğimiz React JS ve komponentleri(örnek: state) İkinci olarakta react native’den gelen DOM elemanlarımızı import ediyoruz
React Native’de dilersek kendi kompanentlerimizi oluşturup kullanabiliriz
Örnek olarak ana dizinde mycomponent adında bir klasör oluşturup içine Header adında bir JavaScript dosyası oluşturuyoruz
import React, { Component } from 'react';
import { View, Text } from 'reactnative';
const Header () {
return (
View style { stylesheaderBar }
TextHEADERText
View
);
}
const styles {
headerBar: {
fontSize: 50,
backgroundColor: '#30a7a7',
height: 50,
justifyContent: 'center',
alignItems: 'center',
shadowOpacity: 02,
shadowOffset: { width: 0, height: 2 }
}
}
export default Header;
Header dosyamızın içinde Header adında bir fonksiyon oluşturduk bu Hedaer bize telefonumuzda bir üst bar yapmış oldu
Bu custom kompanentimizi kullanabilmek için başka bir değişle import edebilmemiz için dışarıya export etmemiz gerekiyor bunuda export default Header şeklinde yapıyoruz
Ana App dosyamıza da aşağıdaki gibi import edip kullanıyoruz
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'reactnative';
import Header from 'mycomponentHeader'
export default class myClass extends Component
{
render(){
return (
Header
);
}
}
const styles {
header: {
fontSize: 30,
backgroundColor: '#30a7a7',
height: 30,
justifyContent: 'center',
alignItems: 'center'
}
}
Bir React Native Proje olşuturmak;
React Native’i kurabilmemiz için gerekli olanlar,
Node JS,
Python2,
JDK,
Visual Studio
kurulumların ardından
React Native’in CLI ‘yını yüklememiz gerekli
npm install g reactnativecli komutu ile yükleyebilirsiniz
*Google APIs
*Android SDK Platform 23
*Intel x86 Atom64 System Image
*Google APIs Intel x86 Atom64 System Image
Android Studio’dan yukarda yazan gerekli SDK ayarlarını yapmanız gerekli
Son olarak sdk için ANDROIDHOME yolumuzu windowsa tanımlamamız gerekiyor
Bunun için denetim masası sistem ve güvenlik sistem gelişmiş sistem koruması ortam değişkenlerinden yeni ekleyetıklayıp aşağıdaki resimdeki gibi ayarlarını yapıyoruz
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 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(){
thismsg “Hello World; thismsg “Hello World;
thishello function(params){ thishello (params) {
return thismsg + hello return thismsg + 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
ES67 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 { propstext } 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 ReactComponent {
constructor(props) {
super(props);
thisstate {
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;
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 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 { stylestext }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’;
import { Text, View } from ‘reactnative’;
şeklinde elemanlarımızı import etmemiz gerekir Burda ilk import ettiğimiz React JS ve komponentleri(örnek: state) İkinci olarakta react native’den gelen DOM elemanlarımızı import ediyoruz
React Native’de dilersek kendi kompanentlerimizi oluşturup kullanabiliriz
Örnek olarak ana dizinde mycomponent adında bir klasör oluşturup içine Header adında bir JavaScript dosyası oluşturuyoruz
import React, { Component } from 'react';
import { View, Text } from 'reactnative';
const Header () {
return (
View style { stylesheaderBar }
TextHEADERText
View
);
}
const styles {
headerBar: {
fontSize: 50,
backgroundColor: '#30a7a7',
height: 50,
justifyContent: 'center',
alignItems: 'center',
shadowOpacity: 02,
shadowOffset: { width: 0, height: 2 }
}
}
export default Header;
Header dosyamızın içinde Header adında bir fonksiyon oluşturduk bu Hedaer bize telefonumuzda bir üst bar yapmış oldu
Bu custom kompanentimizi kullanabilmek için başka bir değişle import edebilmemiz için dışarıya export etmemiz gerekiyor bunuda export default Header şeklinde yapıyoruz
Ana App dosyamıza da aşağıdaki gibi import edip kullanıyoruz
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'reactnative';
import Header from 'mycomponentHeader'
export default class myClass extends Component
{
render(){
return (
Header
);
}
}
const styles {
header: {
fontSize: 30,
backgroundColor: '#30a7a7',
height: 30,
justifyContent: 'center',
alignItems: 'center'
}
}
Bir React Native Proje olşuturmak;
React Native’i kurabilmemiz için gerekli olanlar,
Node JS,
Python2,
JDK,
Visual Studio
kurulumların ardından
React Native’in CLI ‘yını yüklememiz gerekli
npm install g reactnativecli komutu ile yükleyebilirsiniz
*Google APIs
*Android SDK Platform 23
*Intel x86 Atom64 System Image
*Google APIs Intel x86 Atom64 System Image
Android Studio’dan yukarda yazan gerekli SDK ayarlarını yapmanız gerekli
Son olarak sdk için ANDROIDHOME yolumuzu windowsa tanımlamamız gerekiyor
Bunun için denetim masası sistem ve güvenlik sistem gelişmiş sistem koruması ortam değişkenlerinden yeni ekleyetıklayıp aşağıdaki resimdeki gibi ayarlarını yapıyoruz