Oke gaesss.. pada tutorial kali ini kita akan membahas tentang Height and Width pada React Native. Ini sangat penting untuk tampilan visual pada aplikasi yang sering disebut dengan UI (User Interface).
Sebetulnya fungsi dari Height and Width itu sendiri kegunaannya banyak sekali, tetapi karena ini basic maka kita akan menggunakannya pada background saja.
Ada dua buah komponen pada Height and Width di React Native itu sendiri yaitu Fixed Dimension dan Flex Dimension.
Perbedaan dari keduanya yaitu
- Jika kita menggunakan fixed dimension maka kita yang akan menentukan ukuran dari dimension itu sendiri.
- Dan jika menggunakan yang flex dimension kita dapat memperluas komponen dan mengecil secara dinamis berdasarkan ruang yang tersedia.
- Contoh : biasanya kita akan menggunakan flex: 1, yang memberi tahu komponen untuk mengisi semua ruang yang tersedia, dibagi rata di antara komponen lainnya dengan ukuran seluruh ruang yang tersedia. Semakin besar flex yang diberikan, semakin tinggi rasio ruang komponen akan dibandingkan dengan flex: 1. Oke jika masih bingung kita akan mulai ke contohnya.
Baca juga : Belajar React Native I : Pengenalan dan Install React Native
1. Fixed Dimension
Untuk contoh fixed dimension, silahkan edit view style yang terdapat pada file index.android.js . Disini saya masih melanjutkan baris kode pada tutorial yang pertama.
Sekarang kita masukkan perintah berikut didalam <View style={styles.container}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
Maka akan terlihat sepeti gambar dibawah ini.
Baca Juga : Custom Font pada Android Studio dengan Mudah
2. Flex Dimension
Oke sekarang kita ke contoh yang flex dimension, silahkan ubah view style menjadi :
<View style={styles.container, {flex: 1}}> <Text style={[styles.welcome, styles.biggreen]}> Welcome to Badoy Studio! </Text> <Text style={[styles.instructions, styles.skyblue]}> Ini adalah adalah aplikasi android dengan menggunakan framework React Native... Terimakasih Facebook :v </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View>
dan akan tampil seperti gambar berikut.
Baca Juga :Belajar React Native 3 : Pengenalan Style pada React Native
Oke sekian untuk tutorial Height and Width kali ini.
Jika kalian masih bingung silahkan kunjungi masternya disini Github Facebook , untuk pengembangannya implementasikan sendiri lagi sesuai keinginan, semoga bermanfaat.
Sampai jumpa di tutorial berikutnya. Arigatou minnapaiiii ?