Belajar React Native : 2. Height dan Width pada React Native | REACT NATIVE TUTORIAL

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.

---

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. 

Height dan Weight React Native 1

---

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. 

Height dan Weight pada React Native 2