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
Silahkan reload emulator kesayangan anda dengan menekan double R pada keyboard, maka tampilannya akan terlihat seperti gambar dibawah ini.
Sekian untuk tutorial style kali ini, jika masih kebingungan silahkan kunjungi info lengkapnya disini
Arigatouuu minnapai ?