Skip to main content

Belajar React Native 2 : Height dan Width pada React Native

Oke gaesss.. pada tutorial  kali ini kita akan membahas tentang Height and Width pada React NativeIni 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. 

Height dan Width pada React Native - Badoy Studio
Height dan Weight React Native 1

 


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. 

Height dan Width pada React Native - Badoy Studio
Height dan Weight pada React Native 2

 


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 ?

Tulisan Menarik Lainnya :

Tiada hari tanpa ngopi, ngoding dan error not found :v