Basic Layout Tutorial
Last updated
Last updated
Diterjemahkan dari Wix Engineering Blog
‘column’,’column-reverse’,’row’,’row-reverse’
Mendefinisikan arah axis utama dari item component yang berada di dalamnya. Standar awalnya adalah column. Karena kebanyakan aplikasi mobile orientasinya vertikal.
flexakan mendefinisikan seberapa banyak tempat/ruang yang akan didapatkan dari suatu item. Kebanyakan, yang dibutuhkan adalah flex: 1 untuk mendapatkan seluruh tinggi layar/screen.
Ruang akan dibagi sesuai flex dari elemen di dalamnya. Contoh di bawah ini view merah, kuning, dan hijau adalah child dari container yang memiliki flex:1
Yang merah dapat flex:1 , kuning flex:2, dan hijau flex:3
1+2+3=6 yang artinya, merah dapat 1/6 dari total ruang; kuning 2/6; hijau 3/6.
‘flex-start’,’flex-end’,’center’,’space-between’,’space-around’
Menentukan distribusi child di sepanjang main axis yang telah didefinisikan oleh flexDirection. Istilah "justify" datang dari dunia percetakan. Garis yang ada di artikel berita mengisi ruang dengan rata dan lurus pad marginnya.
Standarnya adalah flex-start
‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’
Menyesuaikan/meluruskan item sepanjang cross axis. Jadi, dalam view standard, ini akan mengontrol kelurusan item secara horizontal.
stretch tidak bekerja ketika width dari view sudah dispesifikasi.
flex-start dan flex-end tidak akan mengerti apa yang harus dilakukan jika tidak ada spesifikasi width.
‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’
Meluruskan item dengan corss axis dan menimpa alignItem parent-nya.
‘wrap’, ‘nowrap’
Mengatur apakah item flex dipaksa masuk ke dalam satu baris atau bisa dibungkus ke dalam beberapa baris.
Nilai standarnya adalah nowrap
‘flex-start’, ’center’, ’flex-end’, ’stretch’,’space-between’, ’space-around’
Ketika flexWrap ditentukan menjadi flexWrap:'wrap', maka container memiliki beberapa baris item. Properti ini akan membantu untuk meluruskan baris cross-axis.
‘relative’, ’absolute’
Anggap container seperti orang berbaris. Dan tiap orang itu diperintahkan untuk berdiri 5 meter di belakang orang depannya (marginTop: 5).
Masing-masing orang tadi akan menaati barisan dan memosisikan dirinya relatif terhadap orang di depannya, jika diset relative.
JIka diset ke absolute, maka orang-orang tadi akan mengabaikan barisan dan memosisikan dirinya seolah barisan kosong 5 meter dari permualaan baris (parent container).
Standar nilainya adalah relative
Component bisa diatur dimana tampilannya di atas mana. Di contoh ini, zIndex dari kotak kuning adalah 1
Itulah 9 dasar props layout. Untuk lebih lanjut bisa cek https://reactnative.dev/docs/layout-props
