React Native – 2. Bölüm – Expo ve Android Emulatör Kurulumu 2021

Merhaba dostlar, uzun bir aradan sonra yeniden bir blog yazısı yazıyor olmanın hazzı içerisindeyim. Çok uzatmadan konumuza geçelim. En son React Native üzerine yazmamdan bir hayli uzun bir süre geçti, hem o yazıdaki eksikleri kapatmak, hem de benim yeni öğrendiğim konulardan bahsetmek için bu yazıyı yazıyorum.

İlk olarak bu yazının ana maddelerinden olan Expo nedir ile başlayalım. Expo, React Native geliştirmeye hızlıca başlayabilmek için React Native üzerine yaratılmış bir araçtır. Geliştirmeyi ve test etmemizi kolaylaştıran, bunun yanında normalde üçüncü parti native componentlar ile beraber gelen bir çok kullanıcı arayüz ve servis component’ı içinde barındıran bir araçtır.
kaynak ve daha detaylı bilgi: https://docs.expo.io/

Expo’nun kurulumuna geçmeden önce kısaca bilgisayarımızda olması gereken teknolojileri yazalım (Windows 10 için):

Bunları yükledikten ve kurduktan sonra ortam değişkenlerini ayarlayalım: Bilgisayarımızda arama tuşuna basarak “Sistem ortam değişkenlerini düzenleyin” veya ingilizce kullanıyorsanız System envirements diye aratırsanız bulabilirsiniz. Aşağıdan “Ortam Değişkenleri” butonuna tıklayalım.

Sistem değişkenlerine “Yeni…” diyerek yeni iki adet yeni değişken yazacağız. biri JAVA_HOME diğeri ise ANDROID_HOME. sonrasında PATH adlı değişkene bir kaç yol tanımlayacağız. Önce yeni değişkenlerimizi oluşturalım.

Gördüğünüz üzere değişken değerlerimiz de kurduğumuz dosyaların dizinleri. Siz eğer özel bir alan seçtiyseniz sizde bu dizinler değişkenlik gösterebilir, o yüzden bilgisayarınızda bu dosyalar gerçekten o dizindeler mi diye kontrol etmenizi tavsiye ederim.

Şimdi ise zaten var olan PATH değişkenini düzenleyelim. Eğer sizde PATH değişkeni yoksa yeni oluşturabilirsiniz.

Bende ekli olan son iki Path’i ekleyerek devam edelim:

  • %JAVA_HOME%\bin
  • ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;%ANDROID_HOME%\tools\bin

Şu ana kadar JAVA ve ANDROID kurulum ve sistem değişkenleri sorunsuz eklenmiş diye merak ediyorsanız CMD ekranını yönetici olarak açarak javac komutunu yazabilirsiniz, optionların yazdığı bu çıktıyı görmüş olmalısınız:

Yine cmd ekranındayken java -version yazarsanız da kurulu javanın sürümünü görebilirsiniz.

Şimdi Android Studio’yu açalım ve bir proje oluşturalım. Burada tek amacımız emulatör kurmak. Android Studio’nun tüm indirmeleri bittikten sonra kendisi bir emulator oluşturmuş olması gerekiyor ama oluşturmadıysa da Tools > AVD Manager diyerek emulatorler ekranına gidebiliriz:

Eğer kurulu bir emulator yok ise Create Virtual Device diyerek adım adım yeni bir emulator oluşturabilirsiniz. Test için de sağdaki play tuşuna basıp deneyebilirsiniz.

Not: Bu aşamada eğer bir AMD işlemci kullanıyorsanız Hypervisor hatası alabilirsiniz. Almadıysanız sorun yok ama benim gibi eminim bu hata ile karşılaşanlar olacaktır. Çözümü ise 2 aşamalı: Birincisi Windows özelliklerinden Hyper-V ve Windows Hiper Yönetici Platformu seçeneklerini kapatmak (Açık ise). Diğeri ise BIOS’unuzdan SVM yani sanallaştırma seçeneğinin açık olması gerekiyor.

İkisini de yaptıysanız bilgisayarınız yeniden başlatılıp Android Studio’yu açtığınızda Tools > SDK Manager > SDK Tools a giderek Android Emulator Hypervisor Driver for AMD Processors’ın installed olduğunu göreceksiniz, değil ise indirmeyi seçiniz.

Emulator’ümüz tamam ise Expo’ya geçebiliriz. Node’u eğer yeni yüklemediyseniz öncelikle versiyonuna bakmanızı tavsiye ederim, 12 ve üzeri olmalı Expo için. Yönetici olarak CMD açıyoruz ve aşağıdaki komut ile versiyon alıyoruz.


1
node -v

Versiyon 12 ve üzerinde ise devam edelim. Npm ile expo’yu global olarak yükleyelim.


1
npm i -g expo-cli

Bu yükleme biraz vakit alabilir. Tüm paketler yüklendikten sonra bitecektir, bu arada aralarda warning’ler alabilirsiniz, üzerinde durmanıza gerek yok.

Expo yüklendikten sonra ilk projemizi Expo ile oluşturabiliriz. Projemizi oluşturmak istediğimiz dizine gidiyoruz ve aşağıdaki gibi oluşturuyoruz:


1
expo init ReactNativeUygulamam

Karşımıza 5 seçenek çıkacaktır:

üstte bulunan “managed workflow”lar ile expo bizim için çoğu karmaşıklığı kendi halledecek ve projemizde Android ve IOS için ayrı kod şemaları çıkmayacak karşımıza. Biz “blank” seçeneği ile devam edelim. TypeScript ile devam etmek isterseniz ikinci seçeneği seçebilirsiniz.

Projemizin oluşması biraz vakit alabilir. Projemiz oluştuktan sonra artık istediğimiz IDE ile açıp çalışmaya başlayabiliriz. Ben Intellij Idea kullanacağım üstte de tavsiye ettiğim gibi.

IDE’mizde projemizi açtığımızda sol tarafta proje içeriğini görebiliyor olmalısınız. package.json dosyasını açalım. script’lerimiz içinde “expo start” a tıklayalım. Terminal’den de “expo start” komutu aynı işi yapacaktır. Terminal’den de yapsanız, package json’dan da tıklasanız ikisinde de Browser’da Metro Bundler’ımız açılacaktır. Buradan itibaren Terminalden devam edeceğim:

Projemiz bu şekilde gözükecektir.

expo start komutu ile karşımıza QR kodu ve diğer başlatma seçenekleri çıkacaktır. QR kodu ile eğer telefonunuza expo client’ı yüklerseniz, direk oradan da görebilirsiniz uygulamanızı. Biz “a” tuşuna basalım ve open Android seçeneğiniz seçmiş olalım. İlk seferde oluşturduğumuz emulatör açılacaktır, ve react native kodumuzu yükleme işlemi gerçekleştirilir. Eğer emulator açıldı ama uygulama yüklenmediyse tekrar expo start diyerek işlemi tekrarlayalım. Bazen emulatörü başlatmak uzun sürdüğü için sorun yaşanabiliyor.

Uygulamamızın emulatördeki görünümü

Kurulumumuzu ve emulatör çalıştırma işimizi hallettik. Umarım faydalı olmuştur dostlar. Başka yazılarda görüşmek üzere.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

2 Cevaplar

  1. Sinan ŞAHİNER dedi ki:

    Ahmet Bey merhaba,

    Öncelikle her zaman olduğu gibi güzel bir uslupla anlatmışsınız, teşekkürler. Ben de her zamanki gibi sorularımı sorayım…

    1-) Node.js 11’de deneme fırsatı buldunuz mu? Ben biraz eski kafalı olduğumdan mütevellit, 12 ve üstüne henüz geçemedim.
    2-) Expo için Android emulatorü olarak Bluestacks veya benzeri bir şekilde yürütebilme şansımız var mıdır? Çok mu kaynak tüketir? Özetle Android Studio hariç emülatör oluşturabileceğimiz veya hazır alacağımız bir yer var mıdır?
    3-) Son olarak React Native ile tanıştığıma çok memnunum. Benim gibi “yaşlı kurtlar” için de kullanması ve kurcalaması çok zevkli. Bir de React’e expo ve emulator kurma işini sayenizde çözersem her şey tam olacak.

    Teşekkürler.

    Freelancer / Özgür / Keyifçi / Hobici Yazılım Uzmanı | Sinan ŞAHİNER

  1. 4 Nisan 2021

    […] Bu yazının kurulum aşamalarını daha detaylı ve güncel halini okumak isterseniz aşağıdaki bağlantıya gidebilirsiniz, Expo ile kurulum ve Android emulatör oluşturma aşamalarını bulabilirsiniz: https://ahmetkilinc.net/react-native-2-bolum-expo-ve-android-emulator-kurulumu-2021/ […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.