Bagaimana mengunakkan style pada react native

Algoritma

Bagaimana mengunakkan style pada react native

Pada tutorial ini akan dibahas bagaimana pemakaian style pada react-native

Untuk yang biasa mengerjakan website, pasti kita pikir bahwa style di react-native sama dengan css , tapi sebenarnya tidak.

Style di react native ditulis dengan javascript, walaupun sebenarnya kode nya hampir sama dengan css

Untuk lebih jelasnya lihat perbedaan css style dan react native style dibawah ini :

CSS style

.container{ width: 200px; background-color: white; }

Style react-native

var styles = StyleSheet.create({ container:{ width: 200, backgroundColor: 'white' } });

Kita sudah bisa lihat sedikit perbedaannya bukan, jika di css style setiap properti di pisahkan dengan titik koma(;) sedangkan di style react native dipisahkan dengan koma(,). dan di react native kita hanya bisa menggunakkan 'id' untuk tiap selektor nya sedangkan di css style kita bisa menggunakkan 'id' ,'class', 'attribut' dan lain-lain

Berikut ini adalah contoh penggunaan style di react native,

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, { Component } from 'react'; import { Platform, StyleSheet, TextInput, TouchableOpacity, Image, Button, Text, View } from 'react-native'; const content = 'ini isi content ini isi content ini isi content ini isi content ini isi content ini isi content '; export default class App extends Component<{}> { render(){ return ( <View style={styles.container}> <View style={styles.thumbnail}> <Image source={require('../images/logo.png')} style={{width:200, height:150}} /> </View> <Text style={styles.title}> JUDUL </Text> <Text style={styles.description}>{content} </Text> <View style={styles.footer}> <TouchableOpacity onPress={() => 'Klik untuk melihat detail'} style={styles.startButton}> <Text style={{color: 'white'}}>Lihat Detail</Text> </TouchableOpacity> </View> </View> ) }; }; const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 100, backgroundColor: '#333', }, title: { fontSize: 16, textAlign: 'center', margin: 20, color: '#FFFF00', }, description: { color: '#FFFFE0', marginLeft: 24, marginRight: 24, textAlign: 'center', fontSize: 12, lineHeight: 18 }, thumbnail: { alignItems: 'center', marginTop: 50 }, footer:{ width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'row', position: 'absolute', bottom: 0 }, startButton: { width: 300, height: 45, backgroundColor: '#072290', justifyContent: 'center', alignItems: 'center', margin: 20 } });

Dan jika di jalankan, maka hasil-nya seperti ini, kebetulan untuk emulator saya menggunakkan genymotion