Uygulama yazarken bir yandanda temiz kod örneklerinede dikkat etmeliyiz. Bu yazımızda hem temiz kod için style etiketlerini daha düzenli nasıl yazabiliriz ona bakacağız hemde üç farklı kullanımdan ikisini göreceğiz.
Öncelikle düz bir merhaba dünya sayfası oluşturalım.
Görüldüğü gibi ilk oluşturmada hiçbir style olmadan sayfamız bu şekilde.
Şimdi style yazmada 1. yöntem olan ama temiz kod örneklerine çok uymayan bir yapıyı gösterelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { }; } render() { return ( <View style={{flex:1, justifyContent:'center',alignItems:'center',backgroundColor:'#ccafaf'}}> <Text style={{color:'#442727',fontSize:28}}> Merhaba Dünya </Text> </View> ); } } |
Görüldüğü gibi doğrudan style’leri bileşen kodlarınla bir yazdık küçük işlemler için olabilir ancak kapsamlı uygulamalarda karmaşıklığa yol açabilir.
Altta yer alan kodda ise daha okunaklı ve style kodlarının bir yerde toplanmış halidir. Bu kullanım daha pratik ve düzenli olsada bir sonraki yazımda style kodlarını farklı dosyadan çağırmayı göreceğiz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <View style={styles.container}> <Text style={styles.text}> Merhaba Dünya2 </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccafaf' }, text: { color: '#442727', fontSize: 28 } }); |
İlk Yorumu Siz Yapın