React Native ile Android ve iOS Programlama Geliştirme

RageUnseen

Adanmış Üye
29 Ağu 2015
6,891
240
İstanbul
React Native, React kod yazarak web uygulaması geliştiren yazılımcıların aynı zamanda mobil platformlar içinde kod yazabilmesine imkan sunan ve Facebook tarafından geliştirilen bir dildir. Böylelikle mobilde native uygulama geliştiren yazılımcıların güncellemelerde hem Android hem iOS kodlarında çalışma yapmalarına gerek kalmaksızın yeni versiyonun yayına almasını sağlayarak daha verimli sonuçların elde edilmesine imkan tanımıştır.

React Native Nedir?
React Native, ReactJS çatısını baz alarak native arayüzler aracılığıyla mobil uygulama yazılmasını sağlayan bir geliştirme ortamıdır. Native arayüz bileşenlerini barındırdığından React dilinde bulunan <div> bileşeni yerine Android ve iOS’teki arayüzü karşılığına dönüşecek olan <View> bileşeni, <img> yerine ise <Image> bileşeni kullanılır. <View> ve <Image> gibi componentler Facebook tarafından Android ve iOS karşılıklarının kodlanmasıyla oluşturulmuş yapılardır.

React Native Çalışma Yapısı
React Native uygulamalarında ve gibi componentlerin native uygulamadaki karşılıklarını tanımlayan ara bir bridge yapısı bulunmaktadır. Bu yapının nasıl oluşturulduğunu gözlemlemeniz için aşağıdaki resmi inceleyebilirsiniz.



React ve React Native gibi uygulamaların kodlanmasında, kodlamaya pratiklik katan JSX kodları kullanılmaktadır. Yazılan JSX kodu, uygulamanın çalışması ile birlikte Android ve iOS platformları için tasarlanan köprüler yardımıyla ilgili platformun Native bileşenlerine dönüştürür. Böylelikle uygulamanın native olarak yazılmasıyla arasında bir fark kalmıyor. Uygulama çalıştığı sürece native bileşene render işlemi gerçekleştirilmesi CPU tüketimine sebep olduğu için pil tüketimi native uygulamaya göre daha fazladır. Ancak aradaki fark çok küçük olduğundan kullanıcı tarafında herhangi bir sorun teşkil etmeyecektir. React Native bridge sadece UI bileşenlerine değil, ayrıca cihazda bulunan kamera, mikrofon, sensör gibi hardware componentlerine de erişim imkanı sunmaktadır. Ancak oyun kodlama yada image processing gibi işlemler gerçekleştirilmek istendiğinde native dili kullanmanızı tavsiye ederim.

React Native Kurulumu
React Native uygulama geliştirmede gereksinimlerden en önemlisi Android ve iOS SDK lerin kurulu olması konusudur. Ayrıca iOS uygulama geliştirme esnasında simulator gereksiniminden dolayı uygulamalarınızı MacOSX cihazlarda çalışır hale getirmenizi tavsiye ederiz. Aksi takdirde uygulamanızı sadece kodlar ancak simülasyonda çalışır versiyonunu gözlemleyemezsiniz.

NPM

Kod:
#npm install ile react-native-cli modülünün kurulması
npm install -g react-native-cli

#react_ilk_uygulama isimli React Native uygulaması oluşturulması
react-native init react_ilk_uygulama

Yukarıdaki komutu çalıştırmanız ile birlikte react_ilk_uygulama isimli dizinde React Native projesi oluşturulur. Oluşturulan dizin yapısı şu şekilde olacaktır;

tests: Facebook’un JavaScript test aracı ile alakalı bileşenler bu kısımda yer almaktadır.
android: Android platformuna ait dosyalar bu kısımda yer almaktadır.
ios: iOS platformuna ait dosyalar bu kısımda yer almaktadır.
node_modules: Projede kullanılan npm modülleri bu dizin altında kurulmaktadır.
.babelrc: Babel JavaScript derleyicisine ait yapılandırma dosyası olan .babelrc, "presets": ["react-native"] satırı ile node_modules dizininde yer alan babel-preset-react-native plugin’inin kullanılacağını belirtmektedir.
.buckconfig: Android uygulaması için build sürümü ve maven repo url’ini barındırmaktadır.
.flowconfig: React Native projesi ile ilgili çeşitli yapılandırma ayarlarını içermektedir.
.gitattributes/.gitignore: Git versiyon kontrol sistemi ile ilgili yapılandırma dosyalarını içermektedir.
.watchmanconfig: Projenin development aşamasında yapılan değişikliklerin ekrana anında yansıması için kullanılan watchman pluginine ait dosyaları içermektedir.
App.js: React Native uygulama dosyasıdır.
app.json: Uygulamanın manifest dosyasıdır.
index.js: Uygulamanın derlendiğinden ilk çalışan dosyasıdır. İlgili bileşenler ve başlangıç bileşeni bu dosyada belirtilir.
package.json: Proje ile ilgili bağımlılıkların npm’e belirtildiği ana dosyadır. Proje adı, versiyonu, lisans bilgisi, dependecies ve diğer ilgili ayarlar burada tutulur.



React Native Uygulama Kodu İnceleme:
Yukarıda projenin dosyalarını inceledikten sonra default uygulamada bileşenlerin nasıl tanımlandığını inceleyelim. Belirtiğimiz üzere proje içerisinde uygulama dosyası olarak App.js dosyası bulunmektadır. React Native temelinde React programlama dili üzerine kurgulandığı için eğer App.js dosyasını incelerseniz sizin için daha anlaşılır olduğunu gözlemleyebilirsiniz. Burada React programlamadan farklı olarak <div> ve <p> yerine, <View> ve <Text> componentleri bulunmaktadır. Aşağıda oluşturulan uygulamanın kodlarını gözlemleyebilirsiniz.

React

Kod:
export default class App extends Component<{}> { 

  render() { 

    return ( 
      <View style={styles.container}>
        <Text style={styles.welcome}> 
          Welcome to React Native! 
        </Text> 
        <Text style={styles.instructions}> 
          To get started, edit App.js 
        </Text> 
        <Text style={styles.instructions}> 
          {instructions} 
        </Text> 
      </View> ); 

  } 

}

Dosyada gördüğünüz üzere uygulamanın ilk sayfasında Welcome to React Native texti görüntülenecek şekilde bir kodlama gerçekleştirilmiştir. Projenin çalıştırılması için aşağıdaki komutları çalıştırmanız gerekmektedir.

cmd

Kod:
#android uygulamayı derlemek için kullanılan kod
react-native run-android

#ios uygulamayı derlemek için kullanılan kod
react-native run-ios

Projenin Android uygulama olarak derlenmesi için ANDROID_HOME değişkeninin ortam değişkeni olarak bilgisayarınıza eklemesi gerekmektedir. Bunun için öncelikle Android SDK'yini linkten indirmeniz gerekmektedir. Sonrasında aşağıda tanımlı olan komut ile ortam değişkeninize ANDROID_HOME değişkenini tanımlayabilirsiniz.

cmd

Kod:
#Windows için

set ANDROID_HOME=C:\<installation ********>\android-sdk-windows 

set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

cmd

Kod:
#Mac OS X için

export ANDROID_HOME=/<installation ********>/android-sdk-macosx 

export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Komutun çalışması ile birlikte emülatörde yazılı olan mesajı gözlemleyebilirsiniz.



Böylelikle ilk React Native uygulamamızı Android cihazımızda gözlemlemiş olduk. Şimdi uygulamanın arkaplan renginde ve textlerin renginde birkaç kod değişikliği yaparak değişikliklerin nasıl anlık olarak cihazınıza iletildiğini gözlemleyelim. Aşağıda bulunan kod parçası ile hem anasayfada görüntülenen text bilgisini, hem de background rengini rahatlıkla değiştirebiliriz. Altta bulunan kodlamayı App.js dosyası içerisine yapıştırınız.

React

Kod:
export default class App extends Component<{}> { 

  render() { 

    return ( 
      <View style={styles.container}>
        <Text style={styles.welcome}> 
          React Native projeme hoşgeldiniz! 
        </Text> 
      </View> ); 

  } 

}

const styles = StyleSheet.create({ 
    
    container: { 
       flex: 1, 
       justifyContent: 'center', 
       alignItems: 'center', 
       backgroundColor: '#FF0000'
    }, 

    welcome: { 
       fontSize: 20, 
       textAlign: 'center', 
       margin: 10, 
       color: '#CCCCCC'
    }
 
});

Yapılan değişiklikler sonrasında uygulamanın son halini aşağıdaki şekilde görebilirsiniz. Gördüğünüz gibi yaptığımız düzenleme hem text hemde background renginde değişikliğe sebep olmuş durumda.



Alıntıdır​
 
Son düzenleme:
Ü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.