React native de sitillendirme işlemleri için öncelikle sayfaya aşağıdaki kütüphane import edilmelidir.
import { StyleSheet } from 'react-native'
Sonrasında sayfanın en altına aşağıdaki yapıyı ekliyoruz.
const styles = StyleSheet.create({
});
Bu yapının içini css classları yazar gibi dolduruyoruz örnek olarak
const styles = StyleSheet.create({
contentContainer: {
flexGrow: 1,
},
navContainer: {
height: HEADER_HEIGHT,
marginHorizontal: 10,
},
statusBar: {
height: STATUS_BAR_HEIGHT,
backgroundColor: 'transparent',
},
navBar: {
height: NAV_BAR_HEIGHT,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
backgroundColor: 'transparent',
},
titleStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: 18,
},
});
Bazı anahtar kelimelerden bahsedelim.
flex:1
Verildiği elemana enine ve boyuna ne kadar genişlemesi gerektiğini söyler.
Eğer flex:1 verirsek o eleman içinde bulunduğu parent elamanın eni ve boyu kadar genişler.
Bir parent elemanın içinde 3 child eleman olduğunu düşünün.
1. flex:1 ,
2. flex:2,
3. flex:4 olsun.
Burada parent elemanın ananı 1+2+4 = 7 olur. Ver her child eleman kendi flex:x oranında yer kaplar.
flexDirection:’row’
Verildiği elemanın child elemanlarının yan yana veya alt alta dizilmesini ayarlamak için kullanılır.
Değer ‘row’ ise yan yana ‘column’ is alt alta child elemanlar dizilir.
justifyContent:’center’
Verildiği elemanın child elemanlarının dizilişlerini ayarlamak için kullanılır.
Değerleri;
‘flex-start’ : varsayılan değerdir. elamanın başlangıç ekseninden itibaren dizilim olur
‘flex-end’ : elemanın sonundan başlayan dizilim olur
‘center’ : elemanın ortasından dizilim olur
‘space-between’ child elemanlar arasındaki boşluk eşit olacak şekilde dizilim yaplır
alignItems:’center’
Verildiği elemanın pozisyonunu ayarlamak için kullanılır.
Değerleri;
‘stretch’ : varsayılan değerdir
‘flex-start’ : containerin içindeki elemanları sola yaslar
‘flex-end’ : containerin içindeki elemanları sağa yaslar
‘center’ : cantainerin içindeki elemaları merkeze hizalar
Standart css kodlarına çok benzeyen anahtar kelimeler var ama örneği background-color yerine backgrounColor
