Basic React Native Part 10 - React Native StyleSheet

Pada  Part 9 kita telah belajar dan mengenal Props jadi jika anda belum mengikuti tutorial Part 9 diharapkan anda mengikuti tutorial  Part 9 terlebih dahulu.

Pada Tutorial Part 10 ini kita mengenal terlebih dahulu Basic React Native StyleSheet. Kita akan belajar styling dari react native menggunakan stylesheet. React Native Stylesheet mirip dengan stylesheet css yang digunakan dalam pengembangan web. React Native menyediakan sejumlah komponen dasar yang dapat digunakan secara langsung tetapi menurut tema aplikasi, kita harus menyesuaikan komponen kadang-kadang dan itulah mengapa kita menggunakan stylesheet.

Intinya Stylesheet adalah sebuah abstraksi yang mirip dengan stylesheet css. Pada  CSS kode background-color digunakan untuk merubah background color sedangkan pada React Native menggunakan kode backgroundColor, Tidak terlalu berbedakan ?

Terdapat 3 cara untuk membuat style pada tampilan aplikasi, antara lain :

• Inline , membuat style di dalam component yang dijadikan sebagai props
• Embed , membuat style di dalam file yang sama
• External , membuat style di dalam file yang berbeda

Inline

Kita bisa membuat style secara langsung pada component yang ingin kita beri style, untuk membuat style secara inline kita menggunakan props yang sudah disediakan . Akan tetapi cara ini tidak disarankan , karena akan mengotori kode . Dengan metode Inline kita tidak perlu import component StyleSheet dari react native.

• App.js

import React from 'react'
import { View ,Text } from 'react-native'

class App extends React.Component{
    render(){
        return(
        //Code style langsung ditulisan dalam component contohnya seperti berikut ini 
            <View style ={{ height:50 , width :'100%', backgroundColor:'blue',justifyContent:'center', alignItems:'center'}}>
                <Text style={{ fontSize: 20, color:'white',fontWeight:'bold'}}> Ini Text Mengguanakan style Inline </Text>
            </View>
        )
    }
}
export default App

Metode Style Inline

Style Dengan Metode Inline

Embed

Kita bisa juga membuat style tanpa mengotori kode salah satunya dengan cara embed. Embed adalah cara membuat style di dalam satu file , tetapi tidak secara langsung di dalam component. Kita bisa menggunakan built in component yang sudah disediakan oleh React Native yaitu dengan StyleSheet.

Untuk menerapkan Metode Style Embed ini kita menggunakan StyleSheet.create yang jadikan sebagai nilai didalam sebauh variabel dan ditulis berbentuk object.

App.js

• Import Component StyleSheet dari React Native

import { View ,Text, StyleSheet } from 'react-native'

Import Component StyleSheet

• Kode Lengkap sebelum ada styling

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

class App extends React.Component{
    render(){
        return(
            <View>
                <Text> Ini Text Mengguanakan style Embed </Text>
            </View>
        )
    }
}
export default App

Sebelum Ada Styling 

Sebelum Ada Styling

• Kemudian Tambahan styling seperti berikut pada code component View dan Text

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

class App extends React.Component{
    render(){
        return(
        //Tambahkan Style seperti berikut ini
            <View style={styles.container}>
                <Text style={styles.sty_text}> Ini Text Mengguanakan style Embed </Text>
            </View>
        )
    }
}
export default App

• Setelah itu buat variabel dengan nama styles sebelum export default App

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

class App extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.sty_text}> Ini Text Mengguanakan style Embed </Text>
            </View>
        )
    }
}
//Setelah itu buat variabel dengan nama styles sebelum export default App
const styles = StyleSheet.create({
  container:{
    height:50 ,
    width :'100%',
    backgroundColor:'blue',
    justifyContent:'center',
    alignItems:'center'
  },
  sty_text:{
    fontSize: 20,
    color:'white',
    fontWeight:'bold'
  }
})
export default App

Code setelah ada stylng

• Tampilan di Aplikasi

Tampilan Aplikasi Menggunakan Style Embed

External

Kita bisa juga membuat style tanpa mengotori kode dengan cara selain embed yaitu dengan cara external. External adalah cara membuat style tidak dalam satu file melainkan pada file terpisah.

• Buat Folder baru dengan nama src kemudian buat juga file dengan nama file 'styles.js`. Untuk tata cara pembuatan Folder atau File bisa lihat pada Tutorial Part 9

Buat Folder dan File Baru

• Kemudian tambahan code berikut ini pada file styles.js

import { StyleSheet } from 'react-native'

export const styles = StyleSheet.create({
    container:{
      height:50 ,
      width :'100%',
      backgroundColor:'blue',
      justifyContent:'center',
      alignItems:'center'
    },
    sty_text:{
      fontSize: 20,
      color:'white',
      fontWeight:'bold'
    }
  })

styles.js

• kemudian untuk file App.js tambahkan code berikut ini

import React from 'react'
import { View ,Text} from 'react-native'
import {styles} from './src/styles'

class App extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.sty_text}> Ini Text Mengguanakan style External </Text>
            </View>
        )
    }
}

export default App

App.js

• Tampilan Menggunakan Metode style External

Tampilan Menggunakan Metode Style External

Demikianlah pembahasan Tutorial Part 10 akan kita lanjutkan pada Tutorial Part 11

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 31 Desember 2019.