Belajar React Native 3 : Pengenalan Style pada React Native

Gaeesssss… Pada tutorial kali ini kita akan belajar mengenai style pada React Native. Seperti apa sih style pada react natieve simak selengkapnya berikut ini.

 

Props dan State

Sebelumnya,  kita harus mengerti dulu pemahaman dasar dalam React.js tentang Props dan State ya, kalo belum bisa dikunjungi di link ini .

 

Seperti CSS

Pada dasarnya sih memang tidak jauh berbeda seperti CSS yang sudah familiar untuk pembuatan project pada web, namun kita akan membuatnya dengan menggunakan javascript, ya namanya juga React udah pasti javascript laaa :v .

Pada  CSS kode background-color  digunakan untuk merubah background color sedangkan pada React Native menggunakan kode backgroundColor, tidak jauh berbeda bukan?


Baca Juga : Belajar React Native 2 : Height dan Width pada React Native


Pemahaman Javascript

Jadi  pemahaman konsep javascriptnya juga sangat penting jika kita ingin mendalami React Native. Dengan React Native, kita tidak menggunakan bahasa khusus atau sintaks untuk mendefinisikan style.,

Kita hanya menonjolkan aplikasi  dengan menggunakan JavaScript.

Pada style disini juga, kita bisa melewati array style. jadi style terakhir dalam array didahulukan, sehingga kita dapat menggunakannya untuk mewarisi style.

Sebagai contoh silahkan tambahkan kode perintah stylesheet pada file index.android.js. Supaya bisa melanjutkan kode disini saya melanjutkan tutorial  sebelumnya .


Baca Juga : Belajar React Native I : Pengenalan dan Install React Native


File index.android.js

Oke langsung aja buka file index.android.js pada text editor kesayangan kalian. Disitu terdapat baris construrtor style “const styles = StyleSheet.create({“ silahkan tambahkan kode perintah baru kedalam constructor tersebut, perintahnya seperti berikut :

biggreen: {

color: 'green',

fontWeight: 'bold',

fontSize: 30,

},

skyblue: {

color: 'skyblue',

},

 

Pada baris perintah view nya, silahkan beri perintah text style biggreen dan skyblue kita tadi menjadi seperti berikut

<View style={styles.container}>

<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>

 

Hasil Akhir

Akan terlihat hasilnya seperti gambar berikut

pengenalan style pada react native

 

Silahkan reload emulator kesayangan anda dengan menekan double R pada keyboard, maka tampilannya akan terlihat seperti gambar dibawah ini.

pengenalan style pada react native

 

Sekian untuk tutorial style kali ini, jika masih kebingungan silahkan kunjungi info lengkapnya disini

Arigatouuu minnapai ?

Tulisan Menarik Lainnya :

Belajar React Native 6 : Handling Touches Sekarang kita akan membahas tutorial tentang Belajar React Native Handling Touches. Maksud dari Handling Touches pada React Native ini adalah diman...
Belajar React Native 5 : Handling Text Input Gaessssss.... pada tutorial kali ini kita  akan membahas Handling Text Input pada React Native. Text Input adalah hal yang sangat dibutuhkan demi kebu...
Belajar React Native 2 : Height dan Width pada Rea... Oke gaesss.. pada tutorial  kali ini kita akan membahas tentang Height and Width pada React Native. Ini sangat penting untuk tampilan visual pada apli...

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