“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 3. kısmıdır. Bir önceki makalede (Part 2), React Native ile cross-platform mobil uygulama geliştirmek için bilmeniz gereken State ve Props kavramlarından bahsettim.

Bu makalede, React Native’de Stillendirme ve Flex kullanımını örnekleyerek, elementleri boyutlandırma, renklendirme vb. değişiklikler yaparak nasıl özelleştireceğimizi anlatacağım.

Stil, uygulama geliştirmenin önemli parçalarından biridir. Native Android Uygulama geliştirme için XML, kullanıcı arayüzünü tasarlamak için kullanılır. Benzer şekilde, Native iOS Uygulama geliştirme için XCode gereklidir. Ancak React Native’de, hem Android hem de iOS’ta çalışan uygulamayı biçimlendirmek için yalnızca JavaScript kullanıyoruz. Reaksiyona özgü UI bileşenlerinin yerleşimini belirtmek için flexbox kullanılır. Bu makalede, React Native’de stil eklemeyi ve flexbox’ı nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın

Biçimlendirme:

React Native’de stil için CSS’yi kullanamayız. Bunun yerine, stil öğeleri eklemek için JavaScript kullanılır. Her kullanıcı arabirimi öğesi, kendisine uygulanan bir stil ‘props’ alır. CSS’den farklı olarak, adlandırma kuralı camel case (büyük küçük harf) kullanır, örn. bir öğenin arka plan rengini eklemek için “arka plan rengi” yerine “backgroundColor” kullanacağız.

Örneğin, aşağıdaki gibi bir kalın metin oluşturabiliriz:

<Text style={{fontWeight: 'bold'}}>Hello</Text>

Her bileşen farklı türde stil props alır. Geçersiz bir stil’den geçersek yok sayılır.

Stylesheet Kullanma:

Her UI bileşeni için stil props’u eklenmesi, kodu düzenlenmemiş ve dağınık hale getirecektir. Ayrıca, bu şekilde, stili birden fazla kullanıcı arayüzü öğesiyle paylaşamayız. React-Native, farklı kullanıcı arayüzü öğeleri arasında paylaşılabilen bir ortak stil deseni oluşturmak için başka bir yol sağlar. Ortak bir stil sayfası oluşturmak için aşağıda gösterildiği gibi StyleSheet.create yöntemini kullanın:

import React, Component } from 'react';
import StyleSheet, Text, View, Button from react-native
const styles= StyleSheet.create({
title: {
color: blue'
fontWeight:
fontSize: 30,
},
description: {
color: "#841584"
},
});

export default class StyleClass extends Component
render()
return (
<V1ew>
<Text style={styles.title}>This is a heading</Text>
<Text style={styles.description}> This 1s a description with different style</Text>
</View>
);
}
}

Bu örnekte, ‘Metin’ öğeleri içeren ‘StyleClass’ adlı bir bileşenimiz var. Her iki “Text” öğesi iki farklı stil kullanıyor. ‘StyleSheet.create’ öğesini kullanarak bileşeni dışa aktarmadan önce stili tanımlıyoruz. İki farklı stilin oluşturulduğunu görebilirsiniz: “title” ve “description” ve bu stilleri eklemek için “{styles.stylename}” kullanıyoruz. Bu yaklaşımın ana avantajı, kodun daha temiz hale gelmesi ve birden fazla UI bileşeninde bir stil kullanabilmemizdir.

Sabit boyut için yükseklik ve genişlik ekleme:

React-native’de, bir UI öğesi için sabit genişlik ve yükseklik ekleyebiliriz. Sabit yükseklik / genişlik ayarlarsak, tüm boyutlu cihazlar için aynı boyutta oluşturulurlar. ‘Stil’ bölümünde ‘genişlik’ ve yüksekliği aşağıdaki gibi kullanabilirsiniz:

<View style={{width: 150, height: 150, backgroundColor: 'powderblue'}} />

Bu boyutlar birimsizdir ve yoğunluktan bağımsız pikselleri temsil eder.

Ancak bu iyi bir uygulama değildir, çünkü bir görünümün veya başka bir UI öğesinin ekranın yarısını doldurmasını istiyorsak ve sabit boyut kullanırsak, telefonlar ve tabletler gibi farklı cihazlarda farklı olacaktır. Bunun için “flexbox” adı verilen başka bir mekanizma kullanılır. Nasıl çalıştığını kontrol edelim:

Flexbox :

Flex, bir görünüme dinamik boyut vermek için kullanılır. Flex değerine 1 verirseniz, tam ekran alanı kaplar. Ebeveyn görüşüne ‘flex = 1’ verebilir ve alt görüşlerine farklı esnek değerler verebiliriz. Örnek,

<View style={{flex: 1}}>
<View style={{flex: 0.2, backgroundColor: 'red'}} />
<View style={{flex: 0.2, backgroundColor: 'blue'}} />
<View style={{flex: 0.2, backgroundColor: 'black'}} />
<View style={{flex: 0.2, backgroundColor: 'orange'}} />
<View style={{flex: 0.2, backgroundColor: 'green'}} />
</View>

Burada, çıktı aşağıdaki gibi görünecektir:

Gördüğünüz gibi iç görünümler eşit olarak bölünmüş durumda. İç görünümlere aynı değerde farklı bir değer verirsek, aynı çıktıyı üretecektir. Daha büyük bükülme değeri kardeşlerine göre daha yüksek boşluk oranı sağlayacaktır. Bir görünümün 0’dan büyük bir değere sahip esnekliğe sahip olması veya sabit bir yükseklik / genişliğe sahip olması gerektiğini, aksi takdirde alt görünümlerin görünmeyeceğini unutmayın. Flexbox, farklı ekranlarda tutarlı düzen boyutu sağlamak için kullanılır.

Flexbox’ın ana kavramları şunlardır:

1. flexDirection
2. alignItems
3. justifyContent

flexDirection:

flexDirection, child görünümlerinin hangi yönde yerleştirileceğini tanımlamak için kullanılır. Ana flexDirection türleri şunlardır:

row: Tüm öğeleri soldan sağa hizalayın.
column: Tüm öğeleri yukarıdan aşağıya hizalayın. Bu varsayılan değerdir.
row-reverse : Satırın tersi. Tüm öğeleri sağdan sola hizala
column-reverse i: Sütunun tersi. Tüm öğeleri aşağıdan yukarıya hizalayın.

Örnek :

import React, Component} from 'react";
import Text, View, Button } from 'react-native'
export default class MainComponent extends Component{
render(){
return(
<View style={{flexDirection: "row",flex : 1}}>
 <View style-{{flex: 2, backgroundColor: 'red'}} />
 <View style-{{flex: 2, backgroundColor: 'blue'}} />
 <View style-{{flex: 2, backgroundColor: 'black'}} />
 <View style-{{flex: 2, backgroundColor: 'orange'}} />
 <View style-{{flex: 2, backgroundColor: 'green'}} />
</View>
);
 }
}

Aşağıdaki çıktıyı üretecektir:

 

justifyContent:

Geliştirme sırasında bunu, eksenindeki alt görünümlerin nasıl hizalandığını tanımlamak için kullanabilirsiniz. Ana türleri şunlardır:

flex-start: Bu varsayılan değerdir. Tüm içeriği ana eksenin başlangıcına hizalar.

flex-end: İçeriği eksenin sonuna hizalayın.

center: İçeriği eksenin merkezine hizalayın.

space-between : childlar arasındaki kalan alanı dağıtarak tüm childları eksen boyunca eşit aralıklarla yerleştirin.

space-around: childlara eşit boşluk bırakarak eşit boşluk alan childlar.

Örnek :

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
export default class MainComponent extends Component {
  render() {
    return (
      <View style={{flexDirection: "column",flex : 1,justifyContent: 'space-between'}}>
        <View style={{flex: .2, backgroundColor: 'red'}} />
        <View style={{flex: .2, backgroundColor: 'blue'}} />
        <View style={{flex: .2, backgroundColor: 'green'}} />
      </View>
    );
  }
}

Aşağıdaki çıktıyı üretecektir:

alignItems:

Bu, öğeleri çapraz eksen boyunca hizalamak için kullanılır. Ana ekseni hizalamak için justifyContent kullanılabilir. Öğeleri çapraz eksen boyunca hizalar. Türleri şunlardır:

stretch: childi çapraz eksenin yüksekliğine uyacak şekilde uzatın.

flex-start: chidları çapraz eksenin başlangıcına hizalayın.

flex-end: Yukarıdaki ile aynıdır, ancak uçlara hizalanır.

center: Merkeze hizalayın.

baseline : Ortak bir taban çizgisi boyunca hizalayın.

Örnek :

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
export default class MainComponent extends Component {
  render() {
    return (
      <View style={{flexDirection: "column",flex : 1,justifyContent: 'center', alignItems: 'center'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
      </View>
    );
  }
}

Tek bir öğenin alignItems öğelerini geçersiz kılmak için ‘alignSelf’ özelliğini de kullanabilirsiniz.

flexWrap alignContent :

Ekranın boyutu taşarsa, öğeleri kontrol etmek için flexWrap kullanabilirsiniz. ‘nowrap’ ve ‘wrap’ olmak üzere iki değeri vardır. Örnek :

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
export default class MainComponent extends Component {
  render() {
    return (
      <View style={{flexDirection: "column",flexWrap: "wrap",flex : 1}}>
        <View style={{width: 50, height: 250, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 250, backgroundColor: 'blue'}} />
        <View style={{width: 50, height: 350, backgroundColor: 'green'}} />
      </View>
    );
  }
}

Burada görebileceğiniz gibi, son görünüm sağa yerleştirilir, çünkü ikinci görünümün altına yerleştirirsek ekranı geçecektir.

‘FlexWrap’i kullanarak sarmaladıysanız, öğeleri hizalamak için alignContent kullanabilirsiniz. 6 değeri vardır: ‘flex-start’, ‘flex-end’, ‘stretch’, ‘center’, ‘space-between’, ‘space-around’.

Flexbox kavramı CSS’deki ile aynıdır. Tek fark, flexDirection’ın varsayılan olarak “column” olmasıdır ve flex parametreleri yalnızca tek bir sayıyı destekler.

Sonuç:
Makale, React Native App’te Styling’i nasıl gerçekleştirebileceğiniz konusunda kısa bir giriş yapmıştır. Makaleyi herhangi bir noktayı içerecek şekilde güncellememiz gerekiyorsa lütfen okuyun ve bize bildirin.

Kaynak: https://www.opencodez.com/