- JSX React'ın dil formatıdır.
- Component React dünyasınındaki her bir parçadır. Değer alabilen ve aldığı değerleri render edebilen özel yapılardır.
- Stillendirmede React Native Yoga Layout yapısını kullanır. Aynı CSS'de olduğu gibi benzer property'ler kullanılarak isimlendirme yapılır. Örneğin:
StyleSheet.create({
backgroundColor: 'red',
padding: 10,
marginTop: 5,
borderRadius: 20
borderWidth: 1
})
yapısı örnek bir stillendirmedir.
-
Custom Component: React olabildiğince sade bir kod yazmayı hedefler. Karmaşıklığa doğru gidebilecek her bir component yapısı sadeleştirilmelidir. Tekrarlı kullanıma ihtiyaç duyulabilecek bir yapı söz konusuysa burada devreye onu componentlere ayırmak giriyor. Kendi yaşam döngüleri olan componentler üzerinden gitmek her zaman karmaşık yapılara kıyasla daha mantıklı bir çözümdür.
Expo ile React Native projesi oluşturmak için aşağıdaki adımları izlemeliyiz:
- Terminale gidip
npx create-expo-app --templatekomutuyla kurulumu başlatıyoruz. - Kurulumu yaparken karşımıza 4 adet template çıkacaktır. Bunlar:
Blank(JavaScript ile minimal bir yapıda app yazmak için)Blank (TypeScript)(TypeScript ile minimal bir yapıda app yazmak için)Navigation (TypeScript)(Navigation, Expo Router olarak geçiyor yani React Navigation üzerine yazılmış bir paket. File-based routing için kullanılıyor, dosya adınızın ismine göre route işlemi yapıyor.)Blank (Bare)
Blank(TypeScript)'i seçerek kuruluma devam ediyoruz.
- Daha sonra What is your app named? çıkıyor. Projenizin adını yazıyorsunuz. Ve uygulama kurulumu başlıyor.
- Kurulum tamamlandıktan sonra projeyi Visual Studio Code'da açıyoruz. Bu aşamaya geldiğinizde telefonunuza Expo'nun uygulamasını indirip giriş yapmış olmanız gerekir.
- Terminale gidip
npx expo startdiyerek projeyi ayağa kaldırıyoruz ve terminalde karşımıza QR code çıkıyor. Bu kodu Expo uygulamasında okuttuğumuzda kod çıktılarımızı görebiliyoruz. - Expo uygulamasından kaynaklı bir hatadan dolayı
npx expo startbazen çalışmayabilir bu durumda isenpx expo start --tunnelkomutunu çalıştırarak tekrar deneyebilirsiniz. - Expo uygulamasında ayağa kaldırdığım proje örneği:
<View>etiketi projenin container işlevine sahiptir. Web'deki karşılığı<div>etiketidir. View, kendi içinde tuttuğu child'ları ne kadar yer kaplıyorsa default olarak o kadar yer kaplar.<Text>etiketi metinler içindir. Web'deki karşılığı<p>etiketidir.<Image>etiketi resimler içindir. Web'deki karşılığı<img>etiketidir.<ScrollView>etiketi ekranımızın kaydırılabilir olmasını sağlar.<FlatList>etiketi ScrollView ile benzer özelliğe sahip hazır bir componenttir. Listeleme/Carousel yaparken kullanırız.<TextInput>etiketi metin alanları içindir. Web'deki karşılığı<input type="text">etiketidir.- StyleSheet, daha temiz bir şekilde style oluşturduğumuz React Native modülüdür.
- TouchableOpacity, custom component oluştururken kullandığımız bir button componentidir. Bu, basabildiğimiz ve opacity efekti veren bir componenttir. View'a verebildiğimiz stilleri bu componente de verebiliriz.
- Ekranın şu kadarını kapla, ekranın tamamını kapla, ekranın yarısını kapla, ekranı bu kadarlık oranla kapla gibi bir özelliğe ihtiyacımız olursa Flex kullanırız. Flex'in tam işlevi şudur: Bulunduğun yerin sınırları içerisinde kaplayabildiğin kadar yer kapla.
- https://reactnative.dev/docs/flexbox
- https://youtu.be/HSZ6iX58xls?si=Agn0LZUCoeL-aHIV
- https://youtu.be/vOsMMhci1TY?si=hTYGkJxl8i5BwFCV
- Dimensions: Responsive bir tasarım istediğimizde kullanırız. Örneğin height vereceksem ekran büyüdükçe height büyüsün ekran küçüldükçe height küçülsün diyebilmem için Dimensions kullanırız. Örnek kod bloğu:
import { StyleSheet, Dimensions } from "react-native";
const {height} = Dimensions.get('window')
const styles = StyleSheet.create({
headerMain: {
height: 30,
backgroundColor: 'red',
}
})
export default styles;
<Image>etiketine style vermezsen çalışmaz.
- Banner wrap yapabilmek için useRef() kullanırız çünkü kendi item'larımızın değiştiğini anlamamızı sağlıyor.
- Component yapısı hakkında video: https://youtu.be/EYJqMx-mXLU?si=ccJJs8ioWqWGkAzF
-
State Değişkenimiz zaman içerisinde değişiklik gösterecek mi göstermeyecek mi? Cevap evet ise işimiz state ile demektir. useState()'te parantezin içine sayfa açıldığında ilk görmek istediğim veriyi yazıyorum.
-
Lifecycle Herhangi bir component doğar, ekrana düşer ve ölür. Bu yaşam döngüsüne Lifecycle denir. Componentte herhangi bir güncelleme yapmak istiyorsak yani o componentin yaşam döngüsüne erişmek istiyorsak bu noktada ihtiyacımız olan yapı Lifecycle yapısıdır. Functional componentlarda yaşam döngüsünde büyük rol oynayan hook useEffect hook’udur. useEffect 2 amaçla kullanılır:
- State'e etki etmek,
- Component ekrana basıldığında bir şey çalıştırmak.
useEffect(() => {}, []) 2 parametre alır:
- fonksiyon
- hangi state'i takip edeceksem onu eklediğim köşeli parantez
Kaynak: Ezran Bayantemur
React Native uygulamalarında yönlendirme için bir çok alternatif paket var.
- https://reactnavigation.org
- https://github.com/wix/react-native-navigation
- https://github.com/aksonov/react-native-router-flux
Bunlardan React Navigation'ı kullanacağım. React Navigation, topluluğun geliştirdiği ve sayfalar arası gezinmeyi sağlayan üçüncü parti bir kütüphanedir. React Navigation hakkında daha fazla bilgi almak için linkini bıraktığım yazıya bakabilirsiniz: https://medium.com/@dilarauluturhan/ekranlar-arası-yolculuk-react-navigation-2d971aee6697
- Not: React Native'de conditional yapı şu şekilde olur: {helloFlag && <Hello//>} -> helloFlag true ise Hello componentini çağır demektir.
-
Deep Linking, herhangi bir sayfaya giden linki başkasıyla paylaşmamızı sağlar.