Etiket: react-native

9 Ekim 2020

React-Native 9 – Header Component

Artık uygulamamıza güzel bir header componenti yakışır bence onun için kolları sıvıyoruz. İlk olarak hemen hemen her projemde kullandığım native-base paketini projemize ekliyoruz.

9 Ekim 2020

React-Native 8 – Hook kimdir, kimlerdendir ?

React 16.8’le beraber hayatımıza hook’lar girdi. Peki neden böyle bir şeye ihtiyaç duyuldu? React’ın en zayıf ve tartışılmaya açık noktalarından biride kod karmaşıklığıydı. Yaşam döngüsü sırasında bir çok bileşen vardı. Örn: componentDidMount, componentDidUpdate vs gibi bu da kodu çok karmaşık ve kalabalık hale getiriyordu. Proje büyüdükçe kodların okunması ve kodlara açıklık getirmek bir hayli zor oluyordu.

8 Ekim 2020

React-Native 7 – React-Navigation ile DrawerMenu

Selamlar, Artık tamamen kodlamaya ve paket yönetme ve kurma odaklı gidiyoruz. Tüm geliştirmelerimi tamamen iOS ortamında yapacağım. İlk olarak DrawerMenu(Yandan Açılan Menü) kullanıcam. Çünkü Drawer menü hakkında daha az kaynak oldugunu düşünüyorum.  Bu konu biraz uzun olabilir. Bilginize … İlk olarak React-Navigation Drawer Menu için gerekli olan paketleri yükleyelim. npm install @react-navigation/native @react-navigation/drawer @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view Daha sonra, bulundugumuz dizinde cd ios/ […]

20 Ağustos 2020

React-Native 6 – Dosya Yapısı

Selam herkese, Uygulamayı oluşturduk. Artık yavaş yavaş mimarimizi ve neler yapacağımızı kesinleştirmek istiyorum. Şu an tüm klasörlerimi oluşturdum.  assests : Bizim varlıklarımızın bulunduğu dosyadır. Resimde de gözüktüğü gibi fontlarımız, ikonlarımız, resimlerimiz vs vs gibi varlıklarımızı burada tutacağız. components : Bizim bileşenlerimizi özelleştirmek istediğimizde özelleştirilmiş bileşenlerimizi burada tutarız. Genel bir buton yapıp tüm sayfalarda kullanmak istediğimizde o butonu özelleştirdikten sonra bu alanda muhafaza ediyoruz.  screens : […]

20 Ağustos 2020

React-Native 5 – Proje Kurulumu

Herkese Selam, React-Native ile bir kaç bir şeye değindikten sonra proje kurulumu için kolları sıvayalım. İlk olarak projemizi aşağıdaki kod ile oluşturalım. npx react-native init LearnReactNative Genellikle ugraştıgımız klasörleri anlattım. Diğer dosyalarada işimiz düşerse anlatırım ama şu anlık kafa karışıklığına gerek yok. android : Native Android tarafındaki değişikliklerimiz burada mevcuttur iOS : Native iOS tarafındaki değişikliklerimiz burada mevcuttur node_modules : Projemizin npm paketlerinin tutulduğu alandır. package.json – package-lock.json : Uygulamanının […]

23 Mayıs 2020

MERN Stack Nedir ?

MERN; MongoDB, Express, React, Nodejs kelimelerinin baş harflerinden türetilmiş bir isimdir. Javascript ile tamamen baştan sonra bir uygulama geliştirmek için yeterli bir teknoloji yığınıdır. Son zamanlarımda neden javascript dünyasına hayranlık duyuyorum işte tamamen bunun için artık javascript ile bir ürünü çok kolay bir şekilde çıkartabilirsiniz. Sadece o alana özgü olan kütüphaneleri veya frame workleri iyi bir şekilde kullanarak güzel bir ürün ortaya koyabilirsiniz. %90 ‘ı javascript olan bir web […]

22 Mayıs 2020

React-Native 4 – View ve Flex box yapısı

Arkadaşlar selam,  View bizim html ‘de kullanıdımız div ile hemen hemen aynı işlemleri yapmaktadır.  Flex yapısı benim için react-native ortamında style işleri ile uğraşan biri için öğrenilmesi gereken en önemli konulardan biridir. Hayatımıza girmesi ile beraber esnek yapı kurmak istediğimizde bizim işimizi kolaylaştırmıştır. flex: bulunduğu alanı paylaşılmasını ve düzeninin boyutlarını gösterir. Flex:1  dersek kullanıldığı view o anki alanının tamamını kaplar flexDirection ->  Flex yönünü belirler.  […]

15 Mayıs 2020

React-Native Dersleri 1 – Yaşam döngüsü ve kavramları

1 – Constructor Sayfa ilk yüklendiğinde buraya gelir. Statelerimizi buraya ekleriz. this.state = {       data : [] } 2 – ComponentWillMount Component ekranı yerleştirilmeden render ’dan önce çalışmaktadır. Yani render işleminden hemen önceki tetiklenen Event’tir. Aynı constructor gibi özel tanımlı bir fonksiyondur. 3 – Render Sayfanın tüm UI komponentlerini buraya ekleriz. Bu metod diğerlerinden bagımsızdır. Render metodu olmadan component ‘ler çalışmaz. 4 […]

12 Mayıs 2020

React-Native Dersleri 0 – Kimdir bu React-Native

Selam arkadaşlar defalarca başlayıp sonunu getiremediğim bir yazı serisini bitirmek ümidiyle tekrardan başlıyorum. Bu arada React-Native kurulum işlemlerini 3. Kez anlatıyorum. İlk 4 sene önce anlatmışım. React-Native nedir ? – Facebook tarafından üretilen, cross-platform mobil uygulama geliştirme ortamı sağlayan bir framework diyebiliriz. 2013 Yaz’ında Facebook’un kendi içerisinde düzenlediği bir kod geliştirme etkinliğinde temeli atılıyor ve ekip 2 yıl boyunca geliştirdikleri prototipleri ve versiyonları düzenleyerek ilk […]