Belajar React Native : 3. Pengenalan Style pada React Native| REACT NATIVE TUTORIAL

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?

---

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 arraydidahulukan, 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 .

---

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

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