Layout ve Flexbox

Bir bileşen, flexbox algoritmasını kullanarak alt öğelerinin düzenini belirleyebilir. Flexbox, farklı ekran boyutlarında tutarlı bir düzen sağlayacak şekilde tasarlanmıştır.

Doğru düzeni elde etmek için normalde flexDirectionalignItems ve justifyContent kombinasyonunu kullanırsınız.

Flexbox, birkaç istisna dışında React Native'de web'deki CSS'de olduğu gibi aynı şekilde çalışır.

Varsayılanlar farklıdır; flexDirection varsayılan olarak satır yerine sütunu kullanır ve flex parametresi yalnızca tek bir sayıyı destekler.

Flex

flex öğelerinizin ana ekseniniz boyunca mevcut alanı nasıl "dolduracağını" tanımlayacaktır. Alan her elemanın flex özelliğine göre bölünecektir.

Aşağıdaki örnekte kırmızı, sarı ve yeşil görünümlerin tümü, ayarlanan kapsayıcı görünümündeki alt öğelerdir flex: 1. Kırmızı görünüm kullanır flex: 1, sarı görünüm kullanır flex: 2 ve yeşil görünüm kullanır flex: 3. 1+2+3 = 61/6 , mekanın kırmızı görüntüsünü, 2/6mekanın sarı ve 3/6mekanın yeşil görüntüsünü alacağı anlamına gelir .

Layout ve FlexboxVideo dersi için Buraya bakalabilirsiniz.

Flex Direction

flexDirection bir düğümün alt öğelerinin yerleştirildiği yönü kontrol eder. Buna ana eksen de denir . Çapraz eksen, ana eksene dik olan eksen veya sarma çizgilerinin yerleştirildiği eksendir.

  • row Çocukları soldan sağa hizalayın. Sarma etkinse sonraki satır kabın solundaki ilk öğenin altından başlayacaktır.

  • column ( varsayılan değer ) Çocukları yukarıdan aşağıya doğru hizalayın. Sarma etkinleştirilirse sonraki satır, kabın üst kısmındaki soldaki ilk öğeden başlayacaktır.

  • row-reverse Çocukları sağdan sola hizalayın. Sarma etkinleştirilirse sonraki satır kabın sağındaki ilk öğenin altında başlayacaktır.

  • column-reverse Çocukları aşağıdan yukarıya doğru hizalayın. Sarma etkinleştirilirse sonraki satır kabın alt kısmında soldaki ilk öğeden başlayacaktır.

 

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

 

Layout ve Flexbox 

 Layout Yönü

Düzen yönü, hiyerarşideki çocukların ve metnin düzenlenmesi gereken yönü belirtir. Düzen yönü aynı zamanda hangi kenarın startve endreferansın kullanılacağını da etkiler. Varsayılan olarak React Native, LTR düzen yönüne göre düzenlenir. Bu modda startsola atıfta bulunur ve endsağa atıfta bulunur.

  • LTR ( varsayılan değer ) Metin ve alt öğeler soldan sağa doğru düzenlenir. Bir elemanın başlangıcına uygulanan kenar boşluğu ve dolgu sol tarafa uygulanır.

  • RTL Metin ve çocuklar sağdan sola doğru düzenlenir. Bir elemanın başlangıcına uygulanan kenar boşluğu ve dolgu sağ tarafa uygulanır.

İçeriği Yanlara Yasla

justifyContentçocukların kapsayıcılarının ana ekseni içinde nasıl hizalanacağını açıklar. flexDirectionÖrneğin, bu özelliği, bir alt öğeyi , ayarlanmış olarak bir kapsayıcı içinde yatay olarak rowveya olarak flexDirectionayarlanmış olarak bir kapsayıcı içinde dikey olarak ortalamak için kullanabilirsiniz column.

  • flex-start( varsayılan değer ) Bir kapsayıcının alt öğelerini kapsayıcının ana ekseninin başlangıcına hizalayın.

  • flex-endBir konteynerin alt öğelerini konteynerin ana ekseninin sonuna hizalayın.

  • centerBir konteynerin alt öğelerini konteynerin ana ekseninin merkezine hizalayın.

  • space-betweenÇocukların konteynerin ana ekseni boyunca eşit şekilde konumlandırılması, kalan alanın çocuklar arasında dağıtılması.

  • space-aroundÇocukların konteynerin ana ekseni boyunca eşit şekilde konumlandırılması, kalan alanın çocukların etrafında dağıtılması. space-betweenKullanımla karşılaştırıldığında, space-aroundalanın ilk çocuğun başlangıcına ve son çocuğun sonuna dağıtılmasıyla sonuçlanacaktır.

  • space-evenlyHizalama kabının içinde ana eksen boyunca eşit olarak dağıtılır. Her bir bitişik öğe çifti arasındaki boşluk, yani ana başlangıç ??kenarı ile ilk öğe ve ana uç kenarı ile son öğe arasındaki boşluk tamamen aynıdır.

  

import React, { Component } from 'react';
import { View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

  Layout ve Flexbox

Öğeleri Hizalamak

alignItemsçocukların konteynerlerinin çapraz ekseni boyunca nasıl hizalanacağını açıklar. Öğeleri hizalama, buna çok benzer justifyContentancak ana eksene uygulamak yerine alignItemsçapraz eksene uygulanır.

  • stretch( varsayılan değer ) Bir kabın alt öğelerini, heightkabın çapraz ekseniyle eşleşecek şekilde uzatın.

  • flex-startBir konteynerin alt öğelerini konteynerin çapraz ekseninin başlangıcına hizalayın.

  • flex-endBir kabın alt öğelerini kabın çapraz ekseninin ucuna hizalayın.

  • centerBir kabın alt öğelerini kabın çapraz ekseninin merkezine hizalayın.

  • baselineBir kapsayıcının alt öğelerini ortak bir taban çizgisi boyunca hizalayın. Bireysel çocuklar ebeveynleri için referans temeli olacak şekilde ayarlanabilir.

Bir etki yaratmak için stretch çocukların ikincil eksende sabit bir boyuta sahip olmaması gerekir. Aşağıdaki örnekte ayar, çocuklardan kaldırılana alignItems: stretch kadar hiçbir şey yapmaz .width: 50

  

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

  Layout ve Flexbox

Align Self

alignSelfile aynı seçeneklere ve etkiye sahiptir alignItemsancak bir kapsayıcı içindeki çocukları etkilemek yerine, bu özelliği tek bir alt öğeye uygulayarak onun ebeveyn içindeki hizalamasını değiştirebilirsiniz. alignSelfile ebeveyn tarafından belirlenen herhangi bir seçeneği geçersiz kılar alignItems.

 Layout ve Flexbox

İçeriği Hizala

alignContent çapraz eksen boyunca çizgilerin dağılımını tanımlar. Bu yalnızca öğeler kullanılarak birden fazla satıra sarıldığında etkili olur flexWrap.

  • flex-start ( varsayılan değer ) Sarılmış çizgileri kapsayıcının çapraz ekseninin başlangıcına hizalayın.

  • flex-end Sarılı çizgileri kabın çapraz ekseninin sonuna hizalayın.

  • stretch konteynerin çapraz ekseninin yüksekliğine uyacak şekilde sarılmış çizgiler.

  • center Sarılı çizgileri kabın çapraz ekseninin ortasına hizalayın.

  • space-between Satırların arasında kalan alanı dağıtarak, sarılmış çizgileri kabın ana ekseni boyunca eşit aralıklarla yerleştirin.

  • space-around Sarılmış çizgileri kabın ana ekseni boyunca eşit aralıklarla yerleştirin ve kalan alanı çizgiler etrafında dağıtın. Etrafında boşluk kullanımı arasındaki boşlukla karşılaştırıldığında, alanın ilk satırların başlangıcına ve son satırın sonuna dağıtılmasıyla sonuçlanacaktır.

 Daha fazla bilgi için burayı tıklayınız.

Layout ve Flexbox

Flex Wrap

Özellik flexWrapkaplar üzerinde ayarlanır ve çocuklar ana eksen boyunca kabın boyutunu aştığında ne olacağını kontrol eder. Varsayılan olarak çocuklar tek bir satıra zorlanır (bu da öğeleri küçültebilir). Sarmalamaya izin veriliyorsa, gerekirse öğeler ana eksen boyunca birden çok satıra sarılır.

Satırları sararken, alignContentsatırların kaba nasıl yerleştirileceğini belirtmek için kullanılabilir. daha fazlasını burada öğrenin

 Layout ve Flexbox

Temeli Esnetin, Büyütün ve Daraltın (Flex Basis, Grow, and Shrink)

  • flexGrowBir konteyner içindeki herhangi bir alanın ana eksen boyunca çocukları arasında nasıl dağıtılması gerektiğini açıklar. Bir konteyner, çocuklarını yerleştirdikten sonra kalan alanı, çocukları tarafından belirlenen esnek büyüme değerlerine göre dağıtacaktır.

    flexGrow herhangi bir kayan nokta değerini >= 0 kabul eder; 0 varsayılan değerdir. Bir kap, kalan alanı çocuğun esnek büyüme değerine göre ağırlıklandırılarak çocukları arasında dağıtacaktır.

  • flexShrinkÇocukların toplam boyutunun ana eksendeki kabın boyutunu aşması durumunda, çocukların ana eksen boyunca nasıl küçültüleceğini açıklar. Esnek büzülme, esnek büyümeye çok benzer ve herhangi bir taşan boyutun kalan negatif alan olarak kabul edilmesi durumunda aynı şekilde düşünülebilir. Bu iki özellik aynı zamanda çocukların ihtiyaç halinde büyümesine ve küçülmesine izin vererek birlikte iyi çalışır.

    Flex küçültme, 1 varsayılan değer olmak üzere >= 0 olan herhangi bir kayan nokta değerini kabul eder. Bir konteyner, alt öğelerini, çocuğun esnek küçültme değerine göre ağırlıklandırarak küçültecektir.

  • flexBasisana eksen boyunca bir öğenin varsayılan boyutunu sağlamanın eksenden bağımsız bir yoludur. widthBir çocuğun esnek temelini ayarlamak , eğer ebeveyni bir konteyner ise o çocuğun ayarını yapmaya flexDirection: rowveya heightebeveyni bir konteyner ise bir çocuğun ayarını yapmaya benzer flexDirection: column. Bir öğenin esnek temeli, o öğenin varsayılan boyutudur; öğenin herhangi bir esnek büyüme ve esnek küçültme hesaplaması yapılmadan önceki boyutudur.

Daha fazlası için tıklayınız.

Genişlik ve Yükseklik

Yoga'daki özellik width, öğenin içerik alanının genişliğini belirtir. heightBenzer şekilde height özelliği , öğenin içerik alanının boyutunu belirtir .

Her ikisi widthde ve heightaşağıdaki değerleri alabilir:

  • autoVarsayılan Değer olan React Native, diğer çocuklar, metin veya resim olsun, içeriğine göre öğenin genişliğini/yüksekliğini hesaplar.

  • pixelsGenişliği/yüksekliği mutlak piksel cinsinden tanımlar. Bileşende ayarlanan diğer stillere bağlı olarak bu, düğümün son boyutu olabilir veya olmayabilir.

  • percentageGenişliği veya yüksekliği sırasıyla üst öğenin genişliğinin veya yüksekliğinin yüzdesi olarak tanımlar.

 

Mutlak ve Göreli Düzen (Absolute / Relative)

Bir öğenin türü position, onun üst öğesinde nasıl konumlandırılacağını tanımlar.

relative( varsayılan değer ) Varsayılan olarak bir öğe göreceli olarak konumlandırılır. topBu, bir öğenin düzenin normal akışına göre konumlandırıldığı ve ardından , right, bottomve değerlerine dayalı olarak bu konuma göre kaydırıldığı anlamına gelir left. Uzaklık, herhangi bir kardeş veya üst öğenin konumunu etkilemez.

absoluteBir öğe mutlak olarak konumlandırıldığında normal yerleşim akışında yer almaz. Bunun yerine kardeşlerinden bağımsız olarak düzenlenmiştir. Konum top, right, bottomve leftdeğerlerine göre belirlenir.

Layout ve Flexbox 

Flexbox'ı daha iyi anlamak için kullanabileceğiniz etkileşimli yoga oyun alanına göz atın .

Temelleri ele aldık, ancak düzenler için ihtiyaç duyabileceğiniz birçok başka stil de var. Düzeni kontrol eden donanımların tam listesi burada belgelenmiştir .

Gerçek bir uygulama oluşturmaya yaklaşıyoruz. Hâlâ eksik olduğumuz bir şey, kullanıcı girdisini almanın bir yoludur, bu yüzden TextInput bileşeniyle metin girdisinin nasıl ele alınacağını öğrenmeye devam edelim .

Wix Engineers'tan bazı örneklere bakın...

Kaynak

 

Yorumunuzu Ekleyin

Yükleniyor...