react native - koding indonesia

Bagian III React Native – Style, JSX

Height and Width

Ada dua jenis ukuran pada layar yaitu fixed dimensions (memiliki dimensi yang tetap) atau flex dimensions (memiliki dimensi yang dapat berubah sesuai dengan ruang yang tersedia).

Contoh Pertama (fixed position)

Jalankan Programnya maka hasilnya akan seperti berikut ini:

Contoh Program Flex Dimensions

Berikut ini contoh untuk program flex dimensions

Jalankan programnya maka hasilnya akan seperti berikut ini:

Pada program di atas kita menuliskan syntax style di dalam component view secara tidak dipisah.

 

Flex Direction
kita akan membuat kotak berjajar ke samping atau secara horizontal. Silahkan rubah kode program seperti di bawah ini:

Jalankan programnya maka hasilnya akan seperti berikut ini:

Dari program di atas silahkan merubah ‘row’ menjadi ‘column’ setelah itu jalankan kembali programnya dan perhatikan bagaimana perubahannya.

Selanjutnya kita akan mencoba posisi justify dengan pilihan “space-between”. Silahkan buat program seperti di bawah ini:

Setelah itu jalankan programnya maka hasilnya akan seperti berikut:

Dari program di atas silahkan ubah component ‘justifyContent’ menjadi ‘center’ dan pada bagian component ‘flexDirection’ menjadi ‘row’. setelah itu jalankan kembali programnya dan lihat bagaimana perubahannya.

Align Items

Selanjutnya  ubah component Align Items dengan opsi “center dan justiftContent “center”. Silahkan coba kode program di bawah ini:

Setelah itu jalankan programnya maka hasilnya akan seperti berikut:

Pada program di atas silahkan merubah component dari style menjadi berikut :

Setelah itu jalankan kembali programnya dan perhatikan perubahannya.

Demikian tutorial untuk bagian Style. untuk lebih memahami silahkan mencoba untuk merubah-ubah atau memodifikasi dari apa yang telah dipelajari. Kurang lebihnya saya mohon maaf jika ada kesalahan dalam penjelasan. Jika ada Koreksi silahkan beri komentar di bawah ini dan semoga tutorial ini bermanfaat.

Kamu juga bisa ikut membantu orang lain untuk mudah belajar Mobile Apps dengan men-share tutorial ini. Happy koding 😀

Konten developer untuk Mobile Development yang sangat mencintai mobile programming

Tutorial Terkait

  • jo

    request CRUD dengan react native

    • Muhammad Yusuf

      Semoga segera bisa kami buat