Bu yazım bir bakıma önceki yazının devamı sayılabilir.
Daha önce bileşenlere style yazarken aynı .js içerisinde yazıyorduk fakat bu karmaşık projeler için okunabilirliği daha da karmaşık yapmaktadır. Bu sebeple style dosyamızı ayrı tutmak daha düzenli bir yapı kurmamızı sağlayacaktır.
App.js dosyamız şu şekilde olsun
|
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'; import styles from "./style.js"; 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> ); } } |
Style Dosyası:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccafaf' }, text: { color: '#442727', fontSize: 28 } }); export default styles; |
Sonuç yine aynı:
İlk Yorumu Siz Yapın