04.03. Text Styling - Erdinç Uzun

React Native styling kuralları “Text” bileşeni içinde uygulanabilir. Burada ufak bir istisna vardır, iç içe Text bileşenleri yazım style’leri birbirinden devralır. Bu bölüm, Text bileşeni üzerinde örnekler içermektedir.

İç içe text bileşenleri ile başlayıp sonuçları inceleyelim.

export default class App extends Component < Props > {
  render() {
    return TextExample()    
  }
}

const TextExample = () => (
  <View style={styles.container}>
  <Text style={styles.headline}>
  Merhaba <Text style={styles.bold}>React</Text> Native {'\n'}
  <Text style={styles.subheader}>Çok <Text style={styles.bold}>güzellll!</Text></Text>
  </Text>
  <Text style={styles.text}>
  Styling <Text style={styles.bold}>metni</Text> iç içe <Text style={styles.italic}>React Native.</Text>
  </Text>
  <Text style={[styles.text, styles.moreLineHeight, styles.right]}>
  Sağa yaslama ve daha fazlası... <Text style={styles.code}>Örnek</Text>lere devam.
  </Text>
  <Text style={[styles.text, styles.center, styles.thin]}> Ortalama ve ince metin... </Text>
  </View>
  );
  
  const styles = StyleSheet.create({
    container: {flex:1, flexDirection: 'column', 
    justifyContent: 'center'},
    headline: {fontFamily: 'Georgia', fontSize: 20},
    subheader: { color: 'blue' },
    bold: { fontWeight: 'bold' },
    thin: { fontWeight: '200'},
    italic: { fontStyle: 'italic' },
    moreLineHeight: { lineHeight: 40 },
    right: { textAlign: 'right'},
    center: { textAlign: 'center'},
    code: { fontFamily: 'Courier'}
    });

export default class App extends Component < Props > {

render() {

return TextExample()

}

const TextExample = () => (

Merhaba <Text style={styles.bold}>React</Text> Native {'\n'}

<Text style={styles.subheader}>Çok <Text style={styles.bold}>güzellll!</Text></Text>

</Text>

Styling <Text style={styles.bold}>metni</Text> iç içe <Text style={styles.italic}>React Native.</Text>

</Text>

Sağa yaslama ve daha fazlası... <Text style={styles.code}>Örnek</Text>lere devam.

</Text>

<Text style={[styles.text, styles.center, styles.thin]}> Ortalama ve ince metin... </Text>

</View>

);

const styles = StyleSheet.create({

container: {flex:1, flexDirection: 'column',

justifyContent: 'center'},

headline: {fontFamily: 'Georgia', fontSize: 20},

subheader: { color: 'blue' },

bold: { fontWeight: 'bold' },

thin: { fontWeight: '200'},

italic: { fontStyle: 'italic' },

moreLineHeight: { lineHeight: 40 },

right: { textAlign: 'right'},

center: { textAlign: 'center'},

code: { fontFamily: 'Courier'}

});

Text bileşenleri takip ve yorumlamak biraz güç hale geldi. Bu durumda tekrar kullanılabilen bileşenler içinde Text bileşenlerini gruplayabiliriz ve grupladığımız text bileşenlerinden yeni bir bileşen oluşturabiliriz. Örneğin,

import PropTypes from 'prop-types';
export default class App extends Component < Props > {
      render() {
        return TextExample()    
      }
    }
    
const TextExample = () => (
  <View>
    <Headline>Bu başlık</Headline>
    <BodyCopy>Bir metin <Bold>kalın</Bold> metin.</BodyCopy>
  </View>
);

const Bold = ({ children }) => <Text style={boldTextStyles.text}>{children}</Text>;
Bold.propTypes = {  children: PropTypes.node.isRequired};
const boldTextStyles = StyleSheet.create({ text: { fontWeight: '600'}});
const BodyCopy = ({ children }) => <Text style={bodyCopyStyles.text}>{children}</Text>;
BodyCopy.propTypes = { children: PropTypes.node.isRequired };
const bodyCopyStyles = StyleSheet.create({ text: { fontFamily: 'Helvetica', fontSize: 18, color: '#333'}});
const Headline = ({ children }) => <Bold><Text style={headlineStyles.text}>{children}</Text></Bold>;
Headline.propTypes = { children: PropTypes.node.isRequired};
const headlineStyles = StyleSheet.create({ text: { fontFamily: 'Optima', fontSize: 30, color: '#333'}});

import PropTypes from 'prop-types';

export default class App extends Component < Props > {

render() {

return TextExample()

}

const TextExample = () => (

<View>

<Headline>Bu başlık</Headline>

<BodyCopy>Bir metin <Bold>kalın</Bold> metin.</BodyCopy>

</View>

);

const Bold = ({ children }) => <Text style={boldTextStyles.text}>{children}</Text>;

Bold.propTypes = { children: PropTypes.node.isRequired};

const boldTextStyles = StyleSheet.create({ text: { fontWeight: '600'}});

const BodyCopy = ({ children }) => <Text style={bodyCopyStyles.text}>{children}</Text>;

BodyCopy.propTypes = { children: PropTypes.node.isRequired };

const bodyCopyStyles = StyleSheet.create({ text: { fontFamily: 'Helvetica', fontSize: 18, color: '#333'}});

const Headline = ({ children }) => <Bold><Text style={headlineStyles.text}>{children}</Text></Bold>;

Headline.propTypes = { children: PropTypes.node.isRequired};

const headlineStyles = StyleSheet.create({ text: { fontFamily: 'Optima', fontSize: 30, color: '#333'}});

HeadLine, BodyCopy, Bold isminde üç yeni bileşenimiz var. Bu bileşenler aslında Text bileşeninin özel durumlarıdır. Örneğin, Bold bileşeni style olarak boldTextStyles.text özelliklerini alır. children parametresi üzerinden Text arasına yazılacak metin verisini alır. Bold.propTypes bölümde children verisinin required (gerekli) olduğu belirtilir. PropTypes kullanılabilmesi içinde en başta sisteme import edilmiştir. Benzer tanımlamalar üç farklı yeni bileşen için yapılmıştır. Bu yapı sayesinde daha yönetilebilir bir yapı elde edebilirsiniz.

Bu bölümde aklımıza style ve children hariç bir özellik gelirse ne olacağı gelir. Örneğin tıklama özelliği veya yepyeni bir özellik eklemeye çalışırsak yukarıdaki kodun genişletilmesi gerekir.

const TextExample = () => (
  <View>
...
    <Bold2 onPress={() => console.log('Tıklandı.!')} numberOfLines={2} style={bold2styles.green}>
    Bir başka metin, bu metin üzerine tıkladığınızda console bölümüne tıklandı yazar.
    </Bold2>
  </View>
);
...
const Bold2 = ({ children, style, ...otherProps }) => <Text style={[boldTextStyles.text, style]} {...otherProps}>{children}</Text>;
Bold2.propTypes = {children: PropTypes.node.isRequired, style: Text.propTypes.style};
const bold2styles = StyleSheet.create({ green: {color: 'green'}});

const TextExample = () => (

<View>

...

<Bold2 onPress={() => console.log('Tıklandı.!')} numberOfLines={2} style={bold2styles.green}>

Bir başka metin, bu metin üzerine tıkladığınızda console bölümüne tıklandı yazar.

</Bold2>

</View>

);

...

const Bold2 = ({ children, style, ...otherProps }) => <Text style={[boldTextStyles.text, style]} {...otherProps}>{children}</Text>;

Bold2.propTypes = {children: PropTypes.node.isRequired, style: Text.propTypes.style};

const bold2styles = StyleSheet.create({ green: {color: 'green'}});

Burada, ES6 ile gelen spread (yayılma) kullanılmıştır. “…otherProps”, children ve style hariç diğer özellikleri işaret eder. Örneğin, OnPress ve numberofLines özellikleri bu sayede kullanılabilmiştir.