Devy Ferdiansyah, M. Kom

Kumpulan BLOG dan VLOG Pribadi Koe

Mengenal Tinggi dan Lebar [Height, Width]

1 min read

Dalam sebuah objek berbentuk 4 persegi, biasanya kita akan menemui permasalahan dalam menentukan berapa ukuran panjang/tinggi dan lebar, begitu juga di react native. untuk membuat sebuah tampilan kotak kita harus terlebih dahulu menentukan tinggi dan lebar kotak tersebut, ada 2 cara menentukan tinggi dan lebar kotak layar, yaitu :

  1. Kotak 2 dimensi dengan lebar dan tinggi tetap [fixed]
  2. kotak 2 dimensi dengan lebar penuh layar dan tinggi yang ditentukan sendiri [flex]

Untuk kotak 2 dimensi dengan tinggi dan lebar tetap dapat di contohkan dengan contoh kode berikut ini :

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'yellow'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'green'}} />
      </View>
    );
  }
}

Simpan lalu nanti akan tampil dihandphone anda seperti berikut :

Nah kalo mau tampilan kotak 2 dimensinya lebarnya full 100% dan tingginya kita yang nentuin, bisa pakai “FLEX” yaa, dibawah ini contohnya yaa…

 

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'red'}} />
        <View style={{flex: 2, backgroundColor: 'yellow'}} />
        <View style={{flex: 3, backgroundColor: 'green'}} />
      </View>
    );
  }
}

Simpan, terus lihat tampilan dihandphonenya yaaa

Selamat mencoba..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *