Gaessssss… kembali lagi pada tutorial React Native untuk pemula… Sebelumnya mohon mohon maaf banget atas keterlambatan tutornya kali ini dikarenakan ada sesuatu hal yang harus difokuskan kemaren-kemarin. Kali ini kita akan Belajar Layout dengan Flexbox pada React Native yang merupakan lanjutan dari tutorial sebelumnya.
Layout dengan Flexbox pada React Native
Silahkan anda open dulu peralatan tempur kita seperti emulator dan code editor untuk mengelola folder file project kita, karena ini lanjutan tutorial yang sebelumnya jadi kita masih berada pada folder project HelloBadoy. Okeeee sekarang silahkan berikan perintah react-native run-android pada Node.js command prompt kalian yang sudah diarahkan ke direktori folder project kalian dan silahkan tunggu prosesnya.
Jika sukses tidak ada masalah pada proses Node.js command prompt tadi maka pada emulator akan membuka aplikasi kita yang kemarin.
Pada tutorial kali ini masih berhubungan dengan Height & Width kemarin, masih seputar Flex dan sekarang kita akan membuat Layout dengan Flexbox.
Layout dengan Flexbox yaitu sebuah komponen yang dapat menentukan tata letak anak-anaknya dengan menggunakan algoritma flexbox. Flexbox dirancang untuk memberikan tata letak yang konsisten pada berbagai ukuran layar. biasanya akan menggunakan kombinasi flexDirection, alignItems, dan justifyContent untuk mencapai layout yang benar.
Flexbox bekerja dengan cara yang sama seperti React Native seperti pada CSS di web, dengan beberapa pengecualian. Defaultnya berbeda, dengan flexDirection default ke kolom bukan baris, dan parameter flex hanya mendukung satu nomor.
Ada beberapa macam flex yang akan kita buat sekarang, silahkan dibuka code editor kalian dan kita akan mengubah pada file index.android.js kita.
Flex Direction
Menambahkan flexDirection pada style komponen untuk menentukan poros utama tata letaknya, sekarang silahkan kalian ubah pada baris perintah View Style nya saja menjadi seperti berikut :
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
Dan silahkan refresh emulator kalian dengan tap Double R, maka akan berubah seperti berikut
Justify Content
Menambahkan justifyContent ke Style komponen digunanakn untuk menentukan distribusi anak-anak di sepanjang sumbu utama. Haruskah anak dibagikan di awal, pusat, akhir, atau spasi secara merata? Pilihan yang tersedia adalah flex-start, center, flex-end, space-around, dan space-between. Oke sekarang ubah lagi perintah View Style tadi menjadi
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
Maka hasilnya akan berubah seperti berikut :
Align Items
Menambahkan alignItems ke Style komponen digunakan untuk menentukan keselarasan anak-anak di sepanjang sumbu sekunder (jika sumbu utama adalah baris, maka kolom sekunder adalah kolom, dan sebaliknya). Pilihan yang tersedia adalah flex-start, center, flex-end, dan stretch.
Agar peregangan memiliki efek, anak-anak tidak boleh memiliki dimensi tetap sepanjang sumbu sekunder. Pada contoh berikut, setting alignItems: stretch tidak melakukan apapun sampai lebar: 50 dikeluarkan dari anak-anak. Sekarang kita akan mencobanya, silahkan ubah lagi perintah View Style tadi menjadi
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
Maka tampilannya akan menjadi seperti berikut
Oke gaesssss… itulah tutorial singkat React Native Layout dengan Flexbox ini, untuk pengembangannya silahkan kalian coba-coba lagi. Tutorial selanjutnya kita akan membahas Handling Text Input pada React Native.
Jangan lupa klik tombol share, supaya lebih banyak orang yang bisa belajar React Native. Semoga Bermanfaat.
Sumber : facebook