Kategori: 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 […]

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.  […]

17 Mayıs 2020

React-Native 3 – Kurulum ve Sayfa yapısı

Kurulması gerekenler Öncelikle aşağıdaki uygulamaları ve paketleri yüklemeniz gerekmektedir. Bu kurulumlar, işletim sisteminize göre farklılık göstermektedir. 1-NodeJs 2- Brew 3- Mac için Xcode ve Android Studio. 4- Linux ve Windows için Android Studio 5- Npm üzerinden react-native CLI (npm -g install react-native-cli) Ben IDE olarak WebStorm kullanıyorum. Kurulum ve sayfa yapısını anlattığım videomu sizlere paylaşmak istiyorum.

15 Mayıs 2020

React-Native Dersleri 2 – State ve Props kavramları

State nedir ? State yalnızca sınıflar için kullanılabilen ve değişme durumu olabilen bir özelliktir. State bir sınıfın global değişkeni olarak düşünülebilir.  x => this.state  y => değişken State’e yeni bir değer eklemek istediğimizde  ‘ this.setState({x:y}) ‘ Props nedir? Birbirinden farklı componentler arasındaki veri iletişimini props ile saglarız.  Örneğin;  A component ‘inde bir liste var. Listeden herhangi bir item ’ın detayını görmek istiyoruz. Bunun için item […]

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 […]