StyleSheet import etmeden stillere dair bir şey yapamıyoruz. Aşağıdaki gibi import edilir.
import { StyleSheet } from ‘react-native’;
StyleSheet import edildikten sonra, stillerin içinde barındırılacağı bir const tanımlaması yapılır.
Sabit içerisinde tıpkı css sınıfları gibi stil değişkenleri tanımlanabilir. Stil değişkenleri virgül (,) ile ayrılmalıdır.
<View style={styles.container}>
<Text>
Deneme yazisi
</Text>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: 500,
backgroundColor: '#ecf0f1',
padding: 8,
}
});
Stil değişkenleri de özellikler de virgülle ayrılmaktadır. Ayrıca birden fazla stil değişkenini aynı component için kullanabilirsiniz. Bunun için {} parantezler içerisinde [] ile array oluşturularak, stil değişkenlerini de virgülle ayırabilirsiniz.
<View style={[styles.card, styles.redBg]}></View>
Inline Stillendirme
Stiller component içerisine css değişkeni vermeden de kullanılabilir. 1 veya 2 özellik için kullanılabilir olsa da, daha fazla özellik tanımlaması yaparken kodunuzun daha düzensiz görünmesine yol açacaktır. Inline kullanım için aşağıdaki gibi örneklenebilir.
export default function App() {
return (
<View style={{ backgroundColor: 'red', flex:1 }}>
</View>
);
}
Burası şimdilik bu kadar. İçerikler sürekli genişlemeye devam edecektir. Herkese iyi çalışmalar.