react native - koding indonesia

Bagian III React Native – Style, JSX

STYLE

Hello Kodinger, berjumpa kembali ditutorial react native. Pada tutorial kali ini kita akan membahas tentang style.

Pada react native untuk menampilkan suatu tampilan pada screen adalah menggunakan JSX. JSX merupakan syntax XML yang dimasukkan kedalam JavaScript yang digunakan pada apliksi React Native. Ada beberapa hal yang akan kita bahas pada tutorial kali ini yang berhubungan dengan style, antara lain yaitu:

  • Merubah Font Pada React Native
  • Mengatur Lebar dan tinggi suatu objek
  • Layout Menggunakan Flexbox

Untuk menambah wawasan, kodinger bisa mencoba ngulik dari dokumentasi. Karena untuk bagian style ini sedikit lebih mudah untuk dipahami. Jadi pada tutorial kali ini tidak akan dijelaskan secara terperinci. Baiklah langsung saja kita mulai. 

Membuat Project

Caranya:
Buka command prompt atau terminal.
Pada command prompt silahkan arahkan ke folder dimana kita akan menginstall projectnya.
Install project dengan menuliskan perintah berikut “react-native init NamaProject”.  Lalu tunggu hingga proses installasi selesai. Berikut ini gambarnya :

Installasi project pada Folder yang telah ditentukan

Merubah Font

Bagi kamu yang terbiasa dengan CSS pasti tidak akan kesulitan karena styling pada react native ini mirip dengan styling pada CSS, hanya saja menggunakan JavaScript.

Pertama Silahkan rubah syntax pada index.android.js menjadi seperti beikut ini:

Setelah itu silahkan jalankan programnya pada emulator atau bisa juga langsung pada perangkat android dengan perintah “react-native run-android” maka hasilnya akan menjadi seperti berikut :

Penulisan syntax style di atas dapat dilakukan langsung di dalam component view dengan cara:

Selanjutnya mari kita bahas tentang mengatur lebar dan tinggi suatu objek.

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