Windows üzerinde React Native geliştirme ortamını kurmak zordur. Bir emülatörde örnek bir uygulama kurmak ve çalıştırmak istiyorsanız birçok bileşene dikkat etmeyi gerektirir. Neyse ki React Native dökümanlarında kurulumları çok açık bir şekilde anlatmıştır.
Bu yazıda, Android Uygulamaları oluşturmak için React Native framework ve Android Studio kullanarak Windows üzerinde geliştirme ortamımızı nasıl kuracağımızı adım adım anlatacağım.
Yazımız uzun, çaylar, kahveler hazır ise başlayalım ☕
Geliştirme Ortamını Kurma
Mobil geliştirmede yeniyseniz, başlamanın en kolay yolu Expo CLI’dır. Expo, React Native etrafında oluşturulmuş bir araç setidir ve birçok özelliğe sahiptir. Yalnızca Node.js’nin son sürümüne ve bir telefona veya emülatöre ihtiyacınız olacak.
Mobil geliştirmeye zaten aşina iseniz, React Native CLI kullanmak isteyebilirsiniz. Başlamak için Xcode veya Android Studio gerektirir. Bu araçlardan birini zaten yüklediyseniz, birkaç dakika içinde kurup çalışmaya başlayabilirsiniz. Yüklenmemişlerse, kurmak ve yapılandırmak için biraz beklemelisiniz.
Tercih sizin ben her iki yolla kurulumu da anlatacağım. Şimdiden herkese kolay gelsin🤓
Expo CLI ile Hızlı Kurulum
1- Node JS Kurulumu
İşe Node JS kurulumu ile başlayalım. Node 12 LTS üzerinde indirip Node JS kurulumunu tamamlıyoruz.
2- Expo CLI Kurulumu
Node JS kurulumunu tamamladığımıza göre artık npm’yi kullanabiliriz. Windows CMD açıp aşağıdaki komutu yapıştırıyoruz:
npm install -g expo-cli
İşte bu kadar basit.
3- React Native Projesi Oluşturma
Gerekli kurulumları tamamladığımıza göre artık React Native projemizi oluşturmaya hazırız. CMD ile projemizi oluşturmak istediğimiz klasöre gidiyoruz ve aşağıdaki komutları çalıştırıyoruz:
expo init proje_adi
4- Uygulamayı Çalıştırma
Aşağıdaki komut sizin için bir geliştirme sunucusu başlatacaktır.
npm start
Daha sonra Expo istemci uygulamasını iOS veya Android telefonunuza yükleyin ve bilgisayarınızla aynı kablosuz ağa bağlanın. Android’de, projenizi açmak için terminalinizden QR kodunu taramak için Expo uygulamasını kullanın. İOS’ta, Kamera uygulamasının yerleşik QR kodu tarayıcısını kullanın.
5- Uygulamanızı Değiştirme
Artık uygulamayı başarıyla çalıştırdığınıza göre, onu değiştirebiliriz. Bunun için piyasa da çok sayıda kod editörü vardır. Bunlardan sıklıkla tercih edilenler Visual Studio Code, Sublime Text, WebStorm, Atom . Tercih ettiğiniz kod editörde projenizi açın. Artık uygulamanızı geliştirebilirsiniz.
React Native CLI ile Kurulum
React Native dökümantasyonunda yer alan talimatlar, geliştirme yapacağınız işletim sisteminize ve iOS / Android için geliştirmeye başlamak isteyip istemediğinize bağlı olarak biraz farklıdır. Hem Android hem de iOS için geliştirme yapmak istiyorsanız, sorun değil.
1- Node, JDK Kurulumu
React Native dökümantasyonunda, Node JS’i Chocolatey paket yöneticisi ile kurmamızı öneriyor. Bunun için Chocolatey linkine gidip aşağıda yer alan komut satırını Windows’un PowerShell’ini yönetici konumunda açarak buraya yapıştırıyoruz.
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1'))
Kurulum bir kaç dakika zaman alıyor. Kurulduktan sonrachoco or choco -? komutları ile test edebiliriz. Daha sonra bilgisayarımızda Java Geliştirme Kiti yoksa JDK’yı indirip kuruyoruz eğer varsa JDK’nın 8.sürümü veya daha üstü olup olmadığını kontrol ediyoruz. Son olarak PowerShell’de aşağıdaki komutu kullanarak NodeJS’i kuruyoruz.
choco install -y nodejs.install openjdk8
2- Android Geliştirme Ortamı
2.1. Android Studio’yu yükleyin
Buradan Android Studio’yu indirin ve yükleyin . Android Studio kurulum sihirbazındayken, aşağıdaki tüm öğelerin yanındaki kutuların işaretlendiğinden emin olun:
Android SDKAndroid SDK PlatformAndroid Virtual Device- Halihazırda Hyper-V kullanmıyorsanız:
Performance (Intel ® HAXM)( AMD veya Hyper-V için buraya bakın )
Ardından, tüm bu bileşenleri yüklemek için “İleri” yi tıklayın.
2.2. Android SDK’yı yükleyin
Android Studio, varsayılan olarak en son Android SDK’yı yükler. Yerel kod ile bir React Native uygulaması oluşturmak Android 10 (Q)gerektirir. Bunu yapmak için Android Studio’yu açın, “Configure” düğmesine tıklayın ve “Android SDK” seçin.
“SDK Platformları” sekmesini açın, ardından sağ alt köşedeki “Show Package Details” in yanındaki kutuyu işaretleyin. Android 10 (Q) içerisinde aşağıdaki öğelerin işaretlendiğinden emin olun:
Android SDK Platform 29Intel x86 Atom_64 System ImageveyaGoogle APIs Intel x86 Atom System Image
Sonra, “SDK Tools” sekmesini seçin ve burada “Show Package Details” in yanındaki kutuyu da işaretleyin. “Android SDK Build-Tools” girişini bulun ve genişletin, ardından 29.0.2bunun seçili olduğundan emin olun .
Son olarak, Android SDK ve ilgili oluşturma araçlarını indirip yüklemek için “Apply” ı tıklayın.
2.3. ANDROID_HOME ortam değişkenini yapılandırın
React Native araçları, uygulamaları yerel kodla oluşturmak için bazı ortam değişkenlerinin ayarlanmasını gerektirir.
- Windows Denetim Masası’nı açın .
- Kullanıcı Hesapları’na tıklayın , ardından tekrar Kullanıcı Hesapları’na tıklayın
- Ortam değişkenlerimi değiştir’e tıklayın
- Android SDK’nızın yolunu gösteren yeni bir kullanıcı değişkeni oluşturmak için Yeni … seçeneğini tıklayın
ANDROID_HOME:
2.4. Yola platform araçlarını ekleyin
- Windows Denetim Masası’nı açın .
- Kullanıcı Hesapları’na tıklayın , ardından tekrar Kullanıcı Hesapları’na tıklayın
- Ortam değişkenlerimi değiştir’e tıklayın
- Path değişkenini seçin .
- Düzenle’yi tıklayın .
- Yeni’ye tıklayın ve platform araçlarının yolunu (yani Sdk-Tools) listeye ekleyin.
3- Uygulama Oluşturma
React Native, yeni bir proje oluşturmak için kullanabileceğiniz yerleşik bir komut satırı arayüzüne sahiptir. npxNode.js ile birlikte gönderilen global olarak herhangi bir şey yüklemeden ona erişebilirsiniz. "HelloWorld" adında yeni bir React Native projesi oluşturalım:
npx react-native init HelloWorld
3.1. Uygulamayı Android’de Çalıştırma
React Native proje klasörünüzün içinde yeni bir terminal açın. Aşağıdaki komutu çalıştırın:
npx react-native run-android
Harika buraya kadar herşeyi doğru yapılandırılmışsa, yeni uygulamanızın kısa süre içinde Android emülatörünüzde çalıştığını görmelisiniz.
4- Uygulamanızı Değiştirme
Artık uygulamayı başarıyla çalıştırdığınıza göre, onu değiştirebiliriz. Bunun için piyasa da çok sayıda kod editörü vardır. Bunlardan sıklıkla tercih edilenler Visual Studio Code, Sublime Text, WebStorm, Atom . Tercih ettiğiniz kod editörde projenizi açın. Artık uygulamanızı geliştirebilirsiniz.
Bu kadaar 👏👏👏
Tebrikler! İlk React Native uygulamanızı başarıyla çalıştırdınız.
Buraya kadar bir sıkıntı yoksa gelecek yazımızda görüşmek üzere. Eğer varsa videolu anlatım için sizi buraya beklerim.
