react native nedir?

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