React Native Windows Kurulumu
Herkese Merhaba,
Bugün sizlere bir React Native uygulaması oluşturmak için gerekli olan ilk adımlardan biri olan React Native kurulumunu anlatacağım.
React native kurulum yapısından daha önceki yazımda bahsetmiştim. Daha önce Expo kullanarak sıfırdan bir proje oluşturmayı açıklamıştım. Bugün ise React Native CLI kullanarak nasıl proje oluşturabileceğimizi anlatacağım.
Bunun için en güzel referans tabi ki React Native’in kendi sitesinde yer alan kurulum dokümanı. Baktığımızda çok karmaşık ve göz korkutucu geliyor. Bu yüzden hem bu doküman üzerinden hem de izlemiş olduğum Youtube videolarından yola çıkarak adım adım nasıl yapabileceğimizi anlatacağım.
Bu yazım sadece Windows için olacak. MacOs için ayrı bir yazı üzerinden açıklayacağım. Öncelikle dokümanı açalım. Ve karşımıza gelen ekranda aşağıdaki gibi Windows ve Android seçelim.
Burada önemli bir not eklemek isterim : Windows işletim sisteminde IOS kurulumu yapılamıyor maalesef. Bunun için elimizde bir Mac olması gerekiyor. OS işletim sistemindeki bilgisayarımızda Android kurulumu yapabiliyoruz fakat Windows işletim sistemindeki bilgisayarımızda IOS kurulumu yapamıyoruz. Bunu doküman üzerinde Windows — Ios seçtiğinizde de göreceksiniz.
Ve başlamadan önce belirtmek isterim ki güncellemeler geldikçe komutlarda, sürüm numaralarında, paketlerde, araçlarda vs değişiklikler olabilir. O yüzden lütfen her zaman dokümanı takip ederek gidelim.
1. KISIM — INSTALLING DEPENDENCIES
React Native set up dokümanını açalım. Aşağıdaki resimde bizden ilk etapta Node ve JDK yüklememizi istiyor. Yüklü değil ise aşağıda verilen siyah alandaki komut ile kurulum ve yüklemelerimizi yapalım. Bunu lütfen komut istemini “Yönetici Olarak Çalıştır” ile yapınız.
- Şimdi eğer ki bilgisayarınızda Node mevcutsa terminalimizden öncelikle
node -vkomutu ile sürüm numarasının 14 veya üzeri olduğundan emin olun. - İkincisi, dokümanda Node’un LTS versiyonu ile yüklenmesi tavsiye ediliyor. Bunu kontrol etmek için de terminalimize
node -pe process.release.ltskomutunu yapıştıralım. Eğer LTS ile yüklenmişse versiyon adı çıkacak aşağıdaki gibi. Yoksa muhtemelen undefined gelir.
- Üçüncüsü Node kurarken Chocolatey ile kurmamızı istiyor. Chocolatey Node kurulumunda otomatik olarak geliyor ama yine de daha önce yüklediğiniz bir Node’u Chocolatey ile kurup kurmadığınızı kontrol etmek için terminalinize
chocoyazarak kontrol sağlayabilirsiniz. Yüklü ise karşınıza şöyle bir sonuç gelecek.
- Dördüncüsü, eğer hepsi yüklü ise tek yapacağımız Java SE Development Kit (JDK) yüklemek. Komut istemini “Yönetici Olarak Çalıştır” diyerek aşağıdaki gibi yükleyelim.
`choco install -y microsoft-openjdk112. KISIM — ANDROID STUDIO
Geldik diğer aşamaya. Buradaki link üzerinden Android Studio’yu bilgisayarımıza indirelim.
Kurulum için size yardımcı olabilecek iki tane video linki ekliyorum.
Şimdi aşağıdaki Android Studio ekranımızdan sırası ile More Actions — SDK Manager seçiyoruz. ( Ayrıca Preferences → Appearance & Behavior → System Settings → Android SDK şeklinde de ulaşabilirsiniz )
Aşağıdaki gibi bir ekran gelecek. SDK Platforms seçelim ve Show Package Details işaretleyelim. Dokümanda belirtildiği gibi Android 13 (Tiramisu) kısmından Android SDK Platform 33 ve Intel x86 Atom_64 System Image ya daGoogle APIs Intel x86 Atom System Image kutucuklarını işaretleyelim.
Sonra SDK Tools sekmesine geçelim. Yine Show Package Details işaretleyelim ve dokümanda Android SDK Build-Tools kısmından 33.0.0 seçili olduğundan emin olmamızı istiyor. İşaretleyelim. Ve Apply diyerek seçtiğimiz araçları indirelim.
3. KISIM — ANDROID_HOME DEĞİŞKENİ OLUŞTURMA
Şimdi diğer bir aşamaya geçiyoruz.
- Bilgisayarımızda Denetim Masasını açalım
- Kullanıcı Hesapları — ( tekrar ) Kullanıcı Hesapları — Ortam Değişkenlerinizi Değiştirin seçelim ve “Yeni” kısmına tıklayalım.
Karşımıza şöyle bir ekran gelecek. Değişken ismini ANDROID_HOME giriyoruz.
Alttaki alan ise Android Studio’da More Actions — SDK Manager seçtiğimizde gelen ekranda mevcut. Android SDK Location yolunu kopyalayıp buraya yapıştırın ve OK diyerek kaydedin.
- Şimdi ANDROID_HOME değişkenimizin başarı ile kurulduğunu test etmemiz gerek. Windows Başlat kısmından Powershell aratarak Powershell açalım ve
Get-ChildItem -Path Env:\komutunu yapıştıralım. Gelen sonuçlar arasında değişkenin olup olmadığını kontrol edelim.
4. KISIM — PLATFORM-TOOLS EKLEME
Şimdi tekrar Denetim Masasına gidelim. Yine Kullanıcı Hesapları — ( tekrar ) Kullanıcı Hesapları — Ortam Değişkenlerinizi Değiştirin seçelim. Burada Path diye bir kısım göreceksiniz. Onu seçin ve Düzenle’ye tıklayın.
Gelen ekranda “Yeni” seçerek bir ekleme yapacağız. Yine Android Studio’da More Actions — SDK Manager kısmında aşağıda verilen Android SDK Location yolunu kopyalayın ve bu yolun sonuna \platform-tools ekleyin ve kaydedin. ( Lütfen yolun sonuna \platform-tools eklemeyi unutmayın !!! )
Ekleyip eklemediğinizden emin olmak için terminalinizde adbkomutu ile kontrol sağlayabilirsiniz. Eklenmişse aşağıdaki gibi loglar geliyor. Eklenmemişse komut bulunamadı gibi bir hata dönüyor.
Android kurulumumuz bu kadardı. Şimdi bir soluklanıp nefes alalım ve projemizin kurulumuna geçelim.
- Öncelikle dokümantasyona göre React Native CLI paketini global olarak yüklediysek kaldırmamızı istiyor aşağıdaki komut ile.
npm uninstall -g react-native-cli @react-native-community/cli- Sonra
npx react-nativekomutu ile React Native yükleyelim. npx react-native@latest init ExampleProjectkomutu ile projemizi oluşturalım. ( En son sürümü kullanmak istemiyorsanız kullanmak istediğiniz RN sürümünü yazarak proje oluşturabilirsiniz. )
Ve artık sonlara doğru geldik nihayet. Projemizi kurduktan sonra bir de Sanal Cihaz ( Virtual Device / Emulator ) üzerinden görüntülememiz gerek. Bunun için tekrar Android Studio ya geliyoruz ve tekrar More Actions kısmından Virtual Device Manager seçerek Create Device’a tıklıyoruz. Cihaz seçimi için yine buradaki link üzerinden talimatları takip etmeniz faydalı olacaktır. Dakika 16–18.20. Detaylı bir şekilde nasıl seçmemiz gerektiğini anlatıyor.
Önemli: Virtual Device’ı çalıştırdığınızda karşınıza şöyle bir hata gelebilir. “The emulator process has terminated”. Bununla ilgili bir Stackoverflow Linki ekliyorum. Bu hata araştırmalarıma göre belleğin dolu olmasından kaynaklanıyor. Benim durumumda da böyleydi. Eğer böyle bir hata alırsanız Yerel Disk C yi temizleyip alan açtıktan sonra tekrar deneyin. Her şey yolunda ise cihazınız açılacak.
Artık projemizi açabiliriz. VS Code veya editör olarak ne kullanıyorsanız proje klasörümüze gidelim. İki terminale ihtiyacımız olacak. İlk terminalde npm startdiyelim. Diğer terminalde ise npm run androiddiyelim. Her şey yolunda ise projemiz aşağıdaki gibi cihazımızda açılacaktır.
Ve yazımın sonuna geldik. Biliyorum ki çok uzun, karmaşık ve göz korkutucu geliyor. Ancak umarım daha kolay hale getirebilmişimdir. Eğer benim karşılaştığım hatalarla karşılaştıysanız onların çözümü için yardımcı olabilmişimdir. Umarım yaptığınız şeylerden emin olamadıysanız belirttiğim bir takım ek kodlarla test etmeniz konusunda yardımcı olabilmişimdir. Eğer sabredip buraya kadar okuduysanız ve beraber denediyseniz teşekkür ederim. Eklemek istediğiniz şeyler varsa bana yazabilir veya yorum yapabilirsiniz :)
