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:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Style extends Component {
  render() {
    return (
      <View>
        <Text style={styles.merah}>Warna Merah Font Biasa</Text>
        <Text style={styles.merah20}>Warna Merah 20</Text>
        <Text style={styles.biru}>Biru Font 25 BG kuning</Text>
        <Text style={[styles.ukuran, styles.merah]}>Awalnya Tebal dan Hitam, Lalu dirubah Merah dan Tebal</Text>
        <Text style={styles.hijau}>Hijau dan Center</Text>
        <Text style={styles.merahpadding}>Merah dengan paddingLeft = 40</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  ukuran: {
    fontWeight: 'bold',
    fontSize: 30,
  },
  merah: {
    color: 'red',
  },
  merah20: {
    color: 'red',
    fontSize: 20,
  },
  biru: {
    color: 'blue',
    backgroundColor: 'yellow',
    fontSize: 25,
  },
  hijau: {
    color: 'green',
    textAlign: 'center',
    fontSize: 20,
  },
  merahpadding: {
    color: 'red',
    fontSize : 15,
    paddingLeft: 40,
  },
});

AppRegistry.registerComponent('Style', () => Style);

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:

<Text style={{color:'red', fontSize:30}}>Warna Merah Font Biasa</Text>

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

Silahkan klik Next Step di bawah ini untuk melanjutkan belajar.