React Native – Styling

Styles pada react native didefinisikan dalam bentuk objek JSON dengan nama-nama atribute styling yang mirip seperti di CSS. Objek style dapat diterapkan dengan cara “inline” mengisikannya langsung pada attribute/prop style pada semua component react native atau dapat didefinisikan terlebih dahulu menggunakan fungsi StyleSheet.create(StyleObject) dan disimpan dalam sebuah variable yang nantinya dapat dikses pada attribute/prop style pada semua component react native.

Conditional Styling

<View style={[(this.props.isTrue) ? styles.bgcolorBlack : styles.bgColorWhite]}>

Jika nilai dari prop isTrue adalah “true” maka component View tersebut akan menggunakan background warna “black” (hitam) jika tidak maka akan menggunakan warna “white” (putih).

Styling menggunakan inline styles

Setiap “component” react native mempunyai prop/attribut “style” yang dapat anda gunakan dengan mengisi parameter attribute tersebut menggunakan format “object style” yang digukanan pada bahasa javascript yang mirip dengan bahasa CSS”

<Text style={{color:'red'}}>Red text</Text>

Cara ini tidak efisien karna anda harus mendefinisikan object style berulang-ulang disetiap component yang membutuhkan style. saya merekomendasikan anda untuk menggunakan cara stylesheet.

Styling mengunakan stylesheet

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
 red: {
  color: 'red'
 },
 big: {
  fontSize: 30
 }
});

class Example extends Component {
 render() {
  return (
   <View>
    <Text style={styles.red}>Red</Text>
    <Text style={styles.big}>Big</Text>
   </View>
  );
 }
}

Penggunaan multiple styles (Merge Styles)

Anda bisa mengirimkan array ke “prop style” untuk menerapkan beberapa “style”. jika terdapat nama attribut style yang sama maka yang digunakan adalah nama attribute yang terakhir didefiniskan.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
 red: {
  color: 'red'
 },
 greenUnderline: {
  color: 'green',
  textDecoration: 'underline'
 },
 big: {
  fontSize: 30
 }
});

class Example extends Component {
 render() {
  return (
   <View>
    <Text style={[styles.red, styles.big]}>Big red</Text>
    <Text style={[styles.red, styles.greenUnderline]}>Green underline</Text>
    <Text style={[styles.greenUnderline, styles.red]}>Red underline</Text>
    <Text style={[styles.greenUnderline, styles.red, styles.big]}>Big red underline</Text>
    <Text style={[styles.big, {color:'yellow'}]}>Big yellow</Text>
   </View>
  );
 }
}

Add a Comment

Your email address will not be published. Required fields are marked *