02.02. Expo ile React Native’e Hızlı Başlangıç

Expo, yeni bir React Native uygulaması oluşturmayı çok kolaylaştırıyor. XCode veya Android Studio kurulumu yapmadan bir projeyi başlatmanıza olanak tanıyor. Direkt telefonunuza aktarma özelliği Expo’yu ön plana çıkaran özelliklerinden biridir. Bu bölümde expo ile bir proje oluşturup çalıştıracağız.

Node.js kurulu ise expo-cli paketini kuralım. Kurulumu bir komut satırı ekranında yapabilirsiniz. Ancak, Visual Studio Code kullandığım için Terminal bölümünden kurulumu yapacağım.

Ardından expo üzerinden örnek projemizi oluşturalım. Benim kullandığım versiyonda boş proje mi yoksa temel bazı özelliklerin ekli olduğu proje mi diye sordu. Ben boş projeyi seçtim ve ona göre ilk dosyalar oluştu. Aşağıdaki kodlarla örnek projemizi oluşturup, oluşan klasöre ulaşıp npm üzerinden çalıştıralım.

Geçerli tarayıcınızda expo köprüsü hazırlandı. Bu köprü üzerinden Android emulator veya IOS simulator’e ulaşabilir, arkadaşımıza veya tanıdığımıza projemizi yollayabilir, projemizi yayınlayabilir veya sol alt köşedeki QR kod üzerinden kişisel telefonumuzda projeyi çalıştırabiliriz.

  • Run on Android device/emulator
  • Run on iOS simulator
  • Send link with email/SMS…
  • Publish or republish project…

Ancak, proje expo üzerinden kullanılacaksa expo client’in emulator, similator veya cihaz üzerinde kurulu olması gerekir. Expo client kurulumu emulator ve simulator’de otomatik olarak yapılır. Ancak versiyonu değişirse otomatik kaldırmıyor ve expo sürümü eski olduğu için uygulama çalışmıyor. Bu durumda emulator/simulator’den eski expo client’ı kaldırın ve projeyi tekrar yollayın. Kişisel cihazın için expo client’ı kurup ekrandaki QR kodu okutmanız yeterlidir.

Cihaz, emulator/simulator ekranında “App.js” dosyasının <Text> bileşeni içindeki yazı ekranda ise sorun yok. Buradaki yazıyı değiştirip sonucu görebilirsiniz. Burada expo bir köprü görevi görür. Basit projelerde başarı ile çalışır. Ancak bazen çalışmazsa (özellikle kendi native yapılarınızda) “eject” işlemine ihtiyaç duyabilirsiniz.