Expo go for iphone

İphone cihazlarda expo go qr kod taratma nasıl yapılır?

Expo go applikasyonu açıldığında Android cihazlar için tools kısmı ekranın en üst bölümünde çıkıyor.

Fakat Apple cihazlarda durum farklı. Tools kısmında scan qr code yani qr kod taratma bölümü görüntülenmiyor. Bunun için iPhone cihazlarda kamera yı açın ve qr kodu tarayın. Ekranın üst kısmında expo go ile aç sekmesi geliyor. Oraya tıklayın ve expo uygulamanız açılsın.

Kolay gelsin


Expo-react native de app.json nedir?ne işe yarar?

App.json sayfasını proje açılınca görüyoruz. Burada özetle geçelim neler var ne işe yarar bunlar.

1- Orientation:”portrait”

Sayfayı dikey yönlendirme anlamına gelir. Diğer seçenekler ile yatay da yapılabilir.

2- Updates:fallBackToCacheTimeOut =0

Otomatik versiyonlar güncellensin. Ben uğraşmayayım.

3-Splash ekran: uygulama açılana kadar ekranda görünen sayfa

4- privacy: güvenlik ayarları

5- sdkVersion: projem hangi sürümde

6- notification : bildirim ayarları için

7- platforms: hangi ortamlarda çalışacak projem. İos Android web gibi

8- permissions: izinler

9- ios yada android ayarları

Genel itibariyle bu sayfa yukarıdakiler ile ilgili içerikler ve ayarların yapılması içindir.


#drawercontent #icons #expo #reactnative

React Native Navigasyon dan stack navigator ve drawer content yapısını detaylıca incelediğinizi farzediyorum. Önce onlara bakarsınız. Sonrasında drawer content yani soldan çekince açılan çekmece düzeni hakkında biraz çalışma fırsatım oldu. Tutorial da sade şekliyle drawer content yapısı zaten var. expo tarafında ise vector ikons konusunda seçebileceğiniz bir çok ikon mevcut. onları da ayrı ayrı biliyordum. Sonrasında bunları birlikte kullanmak nasıl olacaktı. expo icons inceleyince çeşitli filtreler vardı. tek filtre üstünde çalışmaya karar verdim. burada Antdesign örneği var aşağıda.

Hangi sayfaları kullanacaksanız onları önce stack navigator sayfasında oluşturun. ben birkaç tane seçtim burada. Aşağıdaki örnekleri çoğaltınca sayfanın…


#expo #reactnative #linking #navigate

Linking and navigate in expo react native

Link verme ya da bir sayfaya yönlendirme bizim için proje ihtiyaçlarından biridir. Burada anasayfa üzerinde çalıştım. İsimleri keyfinize göre verin. Sayfa adınız AnasayfaScreen olsun diyelim. Stack kısmında bunları ayarladığınızı ve Iletisim ve Ayarlar sayfalarına da sahip olduğunuzu varsayalım.

Sırasıyla sayfamıza gerekli kütüphaneleri ekleyelim. Sonra Style kısımları ve anasayfa düzeni var. Const içindeki navigation olmazsa proje içindeki sayfaya gitmez. Dikkat edin. Styles kısmı ise oldukça kolay css bilgilerinize dayanır.

Önce sayfamıza gerekli kütüphaneleri ekleyelim. Hangi eklentiyi kullanıyorsanız onun tutorial kısmını ve örneklerini önce detaylıca inceleme yapın derim.

Burada linking kütüphanesi…


Komut satırında expo güncelleme komutlarını yazdınız ama yarıda kesiliyor ya da bitmeye az kala hata veriyor ekranda. Ne yapıyoruz?

Hemen npm uninstall ile girmeyin mevzuya. Sakin bir nefes alın önce.

Expo paketleri genelde büyük ve hızlı yükleme isteyen paketlerdir. Aceleniz varsa aynı anda 4–5 tane birden terminal açıp aynı komutları yazın. İnternet hızınız çok düşük değilse npm paketleri böylece yüklenebilir.

Fakat internet hızınız düşükse yükleme bir türlü tamamlanmaz. İşyeri ağından bağlanıyorsanız, benim de yaptığım gibi öğle yemeği molalarını kullanabilirsiniz. Kullanım sayısı azalınca size düşen internet hızı artar ve kolayca expo güncellemeniz tamamlanır.


Image for post
Image for post

Expo da terminale geldiniz ve expo start yazdınız. Bir de baktınız ki kırmızı harflerle bir hata var. Nedir bu???

Ah şu güncellemeler diyoruz. Ne işler açıyorlar başımıza.

Burda hızlıca harekete geçiyoruz.

Önce güncel node.js yi bilgisayara indirin kurun ve bilgisayarı projeyi yeniden başlatın.

Sonra da expo-cli yi güncelleyin. Terminalde yazın.

Npm install --global expo-cli

(not: burada expo yüklenirken bi duraksama var ise sizin internet hızınızın düşük olmasından kaynaklıdır. Expo gibi büyük ve hızlı yüklenen paketlerde yüksek hızda internet ister. İşyerinde iseniz öğle yemeği molaları internet kullanımı azalır ve size düşen hız artar. O zaman deneyin. Olur.)

Yeniden projenizi expo start komutuyla başlatın.

Hazır

Kolay gelsin.


React Native Başlık (Header) Düzenleme

#expo #reactnative #header

RN Navigasyon tutorial kısmında detaylı açıklamalar var. Özetle aklımızda kalması için yazıyorum.

Header options kısmında yazı syling ile ilgili düzenlemeler yapılabilir. Yazı tipi, yazı rengi, background color, hizalama gibi css den de bildiğimiz typing işleri buradan yapılabilir.

Ayrıca proje yazarken, header kısmında logo yada resim kullanmak da isteriz. İkon kullanmak isteriz. Bunları da buradan yaparız.

StackScreen sayfamızda screen name den sonra options parantezi açarız ve orada sıralarız.

(kodları gelicek. )


React Native Resimlerin Sayfada Gösterilmesi

#expo #reactnative #displayimage

#imagesettings

1-Projenizde ‘assets’ isimli bir klasör açın.

2-Bu klasörün içine istediğiniz resimleri masaüstünden sürükle bırak şeklinde bu klasörünüze alın.

3-Yazdığınız ekranda import ile image kütüphanesini ekleyin.

4-Image yolunu yazarken örnek olsun

‘ . /assets/logo.png ‘

5-Resimleriniz jpg yada png formatında olabilir. Style ile boyut renk vs özellikleri tanımlayabilirsiniz. Bunlar için style kısmına bakarsınız.

6-Render yada return kısmında Scrollview içinde image leri gösterin aksi halde kayan sayfa yapısı sağlanamaz. View ile sayfa sabit kalır ve bikaç resimden sonrası görüntülenmez.


Konu hakkında özet bi fikrimiz olsun. Detaylı anlatım RN Navigasyon tutorial kısmında mevcut.

1-StackNavigator: Ana yığın navigasyonudur. Stacknavigator.js isimli sayfada yazılan ekranların tanımlaması ve navigate işlemlerinin yapılması gerekir. Yoksa sayfalar arası geçiş sağlanamaz.

2-TabNavigator: sayfanın alt kısmında görünen başlık-buton anlamına gelir. Genelde anasayfa ve iletişim butonlarını buraya ekleriz. TabNavigator.js isimli sayfada tanımları yaparız.

3-DrawerContent: Ekranın yan tarafından sürükle bırak şeklinde açılan çekmece yapısındaki başlıktır. Yada gezgin yapısı diyelim. Burada sayfalarımızın screen tanımı yapılır ve her sayfa bie screen anlamına gelir. Drawer başına logonuzu eklemek için drawercontent props yapısı kullanılır ve sidebar isimli yazılan sayfadan logo çekilir.


(S.O.L.I.D prensip başharflerinin kısaltması)

Solid yazılım geliştirmenin temel prensipleri anlamına gelmektedir. (İş başvurusu mülakatlarında soru gelen yerlerden biri olmaya başladı bu konu.)

5 prensipten oluşuyor. Özetleyelim. Detaylı olarak siz de incelersiniz.

  1. Single Resposibility Principle: Sınıfların özellikleri iyi tanımlanmalıdır. Bir sınıf yada fonksiyon yalnızca bir iş yapsın.
  2. Open-closed principle: Open derken bir sınıfa yeni davranışlar ekleyebilelim diyoruz. Closed derken de sınıfın temel özellikleri değişmesin diyoruz.
  3. Liskov Substitution Principle: Alt sınıflar(türetilen) üst sınıfların(türeyen) özelliklerini ve işlevlerini barındırsın. Ayrıca yeni özellikler de eklenebilsin.
  4. Interface Segration Principle: Her işin her sorumluluğum kendi arayüzü olsun. Bir amaç için bir arayüz olsun demektir.
  5. Dependcy Inversion Principle: Üst seviye sınıflar alt seviye sınıflara bağımlı olmasın. (Soyutlama katmanları işin içine girsin.)Sınıflar arası bağımlılıklar olabildiğince az olsun.

Avantajlarından bazıları: anlaşılır kod yazmak, esnek ve güncellenebilir kod yazmak, karmaşadan kurtulmak vs.

Ayşegül Tiriç

Bilgisayar Mühendisi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store