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.