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