Tutorial React Native Dasar - Bahasa Indonesia - #7 Style
Dengan React Native, kita tidak perlu menggunakan bahasa lain yang khusus untuk melakukan styling. Cukup menggunakan Javascript. Seperti yang sudah aku katakan sebelumnya bahwa semua Component bawaan dari React Native menerima prop yang bernama style. Cara kerja dan kegunaannya mirip dengan CSS yang ada pada web, yaitu untuk melakukan styling.
Untuk melakukan styling pada React Native kita bisa langsung mendefenisikannya dalam bentuk POJO (Plain old javascript object). Atau kita dapat menjadikan satu semua style ke dalam bentuk array untuk kemudian dapat kita panggil satu per satu.
Dengan style kita bisa melakukan banyak perubahan tampilan pada setiap Component yang ada pada aplikasi yang kita bangun. Misalnya, merubah warna, background, padding, margin dsb.
Oke, agar lebih paham, mending kita langsung praktek aja yuk. Masih dengan file yang sama yaitu App.js . Silahkan langsung buka file tersebut menggunakan Visual Studio Code. Dan ubah kode dalam App.js menjadi seperti di bawah ini :
Perhatikan kode yang kuberi komenter dengan tanda "<-- (angka)". Aku akan menjelaskan satu-satu berdasarkan angka yang pada komentar :
- 1. Kita dapat melakukan styling dengan cara mendefinikan langsung POJO di dalam prop style.
- 2a. Kita dapat memanggil style yang ktia definisikan dalam variable styles yang ada di baris paling bawah kode. Kita dapat menggabungkan beberapa style dengan cara menggunakan class Stylesheet yang merupakan bawaan dari React Native. Kita dapat menggunakan fungsi Stylesheet.create() untuk menggabungkan beberapa style menjadi satu.
- 2b. Kita juga dapat mendefinisikan lebih dari satu style dengan cara mendefinisikan array dan kemudian meletakkan beberapa style ke dalam array tersebut.
- 3-7. Kita dapat mendefinisikan lebih dari satu props ke dalam component. Pada kode di atas kita menambahkan prop asal.
- 8 & 9. Kita membuat style yang bernama namaPahlawan yang di dalamnya terdapat pengaturan tampilan yang kita gunakan untuk merubah tampilan dari nama dalam component Pahlawan.
Lebih bagus yang mana? Menjadikan style dalam satu variable menggunakan Stylesheet.create() atau mendefinisikannya satu persatu pada setiap component?
Saya pribadi menyarankan untuk menjadikan satu style dalam satu variable. Kenapa? Karena dengan begitu kita dapat menggunakan style tersebut lebih dari satu kali pada banyak component. Dan dengan begitu kita dapat membuat kode kita tampak lebih rapi dan mudah dibaca.
Jika tidak ada error, maka tampilan aplikasimu sekarang adalah seperti gambar di atas. Oke mari lanjut ke tutorial selanjutnya. 👌👇
Tutorial React Native Dasar - Bahasa Indonesia - #8 Layout Dengan Flexbox
0 komentar:
Posting Komentar