Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

React Native » Facebook tarafından üretilen, Javascript ile cross-platform native uygulama geliştirme olanağı sağlayan bir framework.

Web tarafında React.js kullanılırken mobil tarafında React Native kullanılmaktadır.

Hem Android hem iOS için akıllı telefon uygulaması yazmak isterseniz öğrenebileceğiniz bir framework.

React Native kendini güncelliyor ve en son bilgilerden haberdar olmak çok önemli. reactnative.dev adresinden React Native en son sürümünü görebilir diğer dokümanlarını inceleyebilirsiniz.

Uygulama Geliştirmek İçin Neler Gerekli

1. Uygulamayı geliştirmek için Linux, Windows ya da MacOS işletim sistemine sahip bir bilgisayar olması gerekiyor.
2. Kodlarınızı yazacağınız bir metin editörü(Visual Studio Code, Android Studio, WebStorm, XCode...) olmalı.
3. Uygulamayı denemek için Android Studio ile gelen Emülatör ya da XCode Simülatör kullanabilirsiniz veya Android ya da iOS bir cihazı bilgisayarınıza bağlamalısınız.
4. JDK yüklemelisiniz. https://www.oracle.com/java/technologies/javase-downloads.html- Windows x64 Installer indirip kurulum sihirbazından next-next ile kurulumu tamamlayabilirsiniz. Aslında JDK, React için zorunlu değildir fakat Android uygulamaları çalıştırmak için gereklidir. JDK eğer varsayılan ayarlarıyla beraber kurulduysa C::/Program Files'da Java isimli bir dizin oluşur. Onun içinde de jdk.1.7.0.40 adında(güncel versiyona göre değişebilir) bir dizin oluşur. CMD ekranında aşağıdaki kodları yazarak JDK versiyonu öğrenilebilir.

   javac -version

5. Node.js yüklemelisiniz. https://nodejs.org/en/. LTS(Long Time Support) olanı seçmelisiniz. Node.js, üzerinde JavaScript kullanılarak uygulamalar geliştirilebilen bir platformdur.
6. Python( windows üzerinde gerekiyor) python --version ile version öğrenebilirsiniz.
7. XCode ( iOS geliştirme için, windows üzerinde gerekli değil )
8. Android Studio https://developer.android.com/studio. Android Studio ile beraber SDK kurduğundan emin ol. C:\Users\[user]\AppData\Local\Android\sdk klasöründen kontrol edebilirsin. Buradan SDK Sorunlarına bakabilirsin
9. React Native CLI(Komut Satırı Ara yüzü) yüklemek. CMD-Komut ekranını yönetici olarak çalıştırmayı unutmayın. Kullanılan kod içinde -g ifadesi olduğu için global olarak kurulup sistem dosyalarına işleneceği için izin alınması gerekiyor.

   npm install -g react-native-cli

ANDROID_HOME environment variable ayarları

Bazı ortam değişkenlerinin ayarlanması gerekir:

1. Windows Denetim Masası'nı açın.
2. Kullanıcı Hesapları'na tıklayın, ardından tekrar Kullanıcı Hesapları'na tıklayın
3. Ortam değişkenlerimi değiştir üzerine tıklayın
4. Android SDK'nızın yolunu gösteren yeni bir ANDROID_HOME kullanıcı değişkeni oluşturmak için Yeni... seçeneğine tıklayın:

İlk Uygulama

Node.JS kurduktan sonra masaüstünde kendiniz(el ile) "react-app" adında bir klasör oluşturun(isterseniz komut satırından mkdir react-app yazarak da klasör oluşturabilirsiniz), ve bu klasörün içine girin. CMD ekranından bu klasörün içine gelin ve aşağıda ki kodu yazın:

npx --v//6.14.8
//ya da
npm -v//6.14.8

gelen cevap versiyon. Daha sonra "demo" adında bir uygulama/klasör oluşturmak için aşağıda ki kodu yazın:

react-native init demo --version 0.59.8

Hello World

Projenizi VSCode gibi editörle açtıktan sonra App.js sayfasının içeriğini silip aşağıda ki kodlar yardımıyla basit bir Hello World yazısını ekrana yazdırabilirsiniz.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

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

export default App;

Uygulamayı Visual Studio ile açtıktan sonra VSCode içinde terminalden aşağıdaki kodları çalıştırarak, Emülatör üzerinde uygulamayı açabilirsiniz.

react-native run-android

Proje açılmasında "Failed to install the app. Make sure you have the Android development environment set up" gibi bir hata alırsanız bu yazıyı okuyabilirsiniz.

Yukarıda ki kod ile varsayılan Emülatör açılacaktır ancak istediğimiz model varsa bunu kodlara ekleyebiliriz.

Adb Cihaz Listeleme

Emülatör olarak kullanılan cihazların listesini aşağıda ki kodlar yardımıyla yapabiliriz:

adb devices

Ekran Boyutunu Hesaplama

Aşağıdaki kodlar yardımıyla cihazın ekran boyutunu alabilirsiniz.

const{width, height}=Dimensions.get("window");