React Native'de esnek ve duyarlı mizanpajlar oluşturmak için flexbox'tan yararlanın.
Flexbox, esnek tek boyutlu düzenler oluşturmanıza izin veren bir CSS aracıdır. İçeriğinizi ekranda sunma konusunda daha fazla kontrole sahip olmanız için bir kapsayıcı içindeki öğelerin konumunu kontrol etmenizi sağlar.
Bu öğretici, esnek ve duyarlı mizanpajlar oluşturmak için React Native'de flexbox'ın nasıl kullanılacağını gösterir. Flexbox özelliklerini kullanarak bir konteyner öğesinin alt öğelerini nasıl konumlandıracağınızı öğreneceksiniz.
React Native ve Web Geliştirmede Flexbox Davranışını Karşılaştırma
Konteyner öğesinin içeriğini düz CSS'de flexbox kullanarak düzenlemek istiyorsanız, ekran: esnek mülk.
konteyner { görüntülemek: esnek; }Ancak React Native ile, ekran: esnek mülk. Bunun nedeni, React Native'in mizanpaj oluşturmak için varsayılan olarak flexbox kullanmasıdır.
İşte akılda tutulması gereken bazı farklılıklar HTML öğelerini hizalamak için kullanıldığında flexbox nasıl davranır? React Native'de nasıl davrandığına karşı web uygulamalarında:
- esnek Yön varsayılanlar sıra web uygulamalarında ancak varsayılan olarak kolon React Native'de.
- hizalama İçeriği varsayılanlar uzatmak web uygulamalarında ve esnek başlangıç React Native'de.
- flexShrink varsayılan olarak web'de 1 ve React Native'de 0'dır.
React Native'de Flexbox Özelliklerini Kullanma
Flexbox özellikleri, kapsayıcı öğenin alt öğelerinin nasıl hizalanacağını açıklamanıza olanak tanır. Uygulamanızın gereksinimlerine uyan karmaşık düzenler oluşturmak için bu özellikleri anlamanız gerekir.
1. React Native'de flex Özelliğini Kullanma
bu esnek özellik nasıl olduğunu belirler Görüş bileşen ekranı doldurur. Bu özellik, 0'dan büyük veya 0'a eşit bir tamsayı değerini kabul eder. Değer, ekranın kesirini belirtir. Görüş bileşeni almalıdır.
Bu örnekte, tek bir görünüme sahip bir ekran oluşturuyorsunuz. React Yerel bileşenler kitaplığı:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"
ihracatvarsayılanişlevUygulama() {
geri dönmek (
<>arka planRengi: "#A020F0", esnek: 1}} />
</>
)
}
İşte çıktı:
Burada 1'i esnek değer olarak atadınız. Görüş bileşen. bu Görüş alanı bir gruba böldüğünüz için bileşen tüm ekranı (%100) kaplıyor.
Başka bir örneğe bakalım:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"
ihracatvarsayılanişlevUygulama() {
geri dönmek (arka planRengi: "#A020F0", esnek: 1}} /> arka plan rengi: "#7cb48f", esnek: 3 }} />
</View>
)
}
İşte sonuç:
Burada iki tane var Görüş diğerinin içindeki öğeler Görüş eleman. İlk çocuk ayarlandı esnek: 1ve ikincisi şu şekilde ayarlanır: esnek: 3. Bu değerler, iki çocuk arasındaki boşluğu böler. Birincisi ekranın 1/4'ünü, ikincisi ekranın 3/4'ünü kaplar (1+3 = 4 olduğu için ekran 4 bloğa bölünmüştür).
2. React Native'de flexDirection Özelliğini Kullanma
Yukarıdaki ekran görüntüsüne bakarsanız, alt öğelerin üst üste geldiğini göreceksiniz. Bu, React Native'deki flexbox'ın varsayılan davranışıdır (esnek Yön varsayılanlar kolon değer).
Ayrıca ayarlayabilirsiniz esnek Yön mülkiyet sıra, sütun-ters, Ve sıra ters. Aşağıdaki örnekte, esnek Yön ayarlandı sıra, bu nedenle alt öğeler yan yana yerleştirilir:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"sabit stiller = StyleSheet.create({
konteyner: {
arka plan rengi: "#00FF00",
esnek: 1,
Öğeleri hizala: "merkez",
esnek Yön: "sıra",
},
kare: {
arka plan rengi: "#FF0000",
Genişlik: 98,
yükseklik: 98,
marj: 4,
},
});
ihracatvarsayılanişlevUygulama() {
geri dönmek (
</View>
)
}
İşte sonuç:
ayarlamak esnek Yön ile sıra ters çocukları yan yana yerleştirir, ancak sırayı tersine çevirir. Benzer şekilde, sütun-ters çocukları birbirinin üstüne yerleştirir, ancak tarafından tanımlananın tersi sırada kolon.
3. React Native'de justifyContent'i kullanma
bu içeriği haklı çıkarmak özelliği, bir esnek kutu kabının alt öğelerini birincil eksen boyunca hizalar. Eğer esnek Yön ayarlandı kolon, birincil eksen dikey eksendir. olarak ayarlanmışsa sıra, sonra yataydır.
olası değerleri içeriği haklı çıkarmakvardır esnek başlangıç, esnek uç, merkez, arasındaki boşluk, uzay-etrafında, Ve eşit boşluk.
Aşağıdaki örnekte, esnek Yön satıra ayarlanır ve içeriği haklı çıkarmakayarlandı esnek başlangıç:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"sabit stiller = StyleSheet.create({
konteyner: {
arka plan rengi: "#00FF00",
esnek: 1,
İçeriği haklı çıkar: "esnek başlangıç",
esnek Yön: "sıra",
},
kare: {
arka plan rengi: "#FF0000",
Genişlik: 98,
yükseklik: 98,
marj: 6,
},
});
ihracatvarsayılanişlevUygulama() {
geri dönmek (
</View>
)
}
İşte çıktı:
değiştirirseniz esnek Yön ile kolon, esnek başlangıç dikey eksene uygulanacaktır. Böylece kutular üst üste istiflenecektir.
Ayar içeriği haklı çıkarmak merkezlemek için (birincil eksen bir kolon) üç çocuk kutusunu ortalar.
4. React Native'de alignItems kullanma
bu hizalamaÖğeleri özelliği, ikincil eksen boyunca bir esnek kutu kapsayıcısındaki öğelerin yerleşimini belirler. bu tam tersi içeriği haklı çıkarmak. aynen içeriği haklı çıkarmak dikey hizalamaya dikkat eder, hizalamaÖğeleri yatay hizalamayı yönetir. olası değerleri hizalamaÖğeleri vardır esnek başlangıç, esnek uç, merkez, Ve taban çizgisi.
Aşağıdaki örnekte, esnek Yön ayarlandı sıra Ve hizalamaÖğeleriayarlandı esnek başlangıç:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"sabit stiller = StyleSheet.create({
konteyner: {
arka plan rengi: "#00FF00",
esnek: 1,
Öğeleri hizala: "esnek başlangıç",
esnek Yön: "sıra",
},
kare: {
arka plan rengi: "#FF0000",
Genişlik: 98,
yükseklik: 98,
marj: 6,
},
});
ihracatvarsayılanişlevUygulama() {
geri dönmek (
</View>
)
}
İşte çıktı:
ayarlarsanız esnek Yön mülkiyet kolon Ve hizalamaÖğeleri ile merkez, kutular üst üste yerleştirilecek ve alt öğeler ortaya hizalanacaktır.
5. React Native'de alignSelf kullanma
bu hizalaKendini property, tek bir alt öğenin kapsayıcıda kendisini nasıl hizalaması gerektiğini belirler. Geçersiz kılar hizalamaÖğelerive olası değerler şunlardır: esnek başlangıç, esnek uç, merkez, Ve taban çizgisi.
Aşağıdaki örnekte, bir varsayılan ayarlıyoruz hizalamaÖğeleri özelliğini kullanın ve kullanarak geçersiz kılın hizalaKendini:
içe aktarmak Tepki itibaren"tepki"
içe aktarmak { Stil Sayfası, Görünüm } itibaren"tepki-yerli"sabit stiller = StyleSheet.create({
konteyner: {
arka plan rengi: "#00FF00",
esnek: 1,
Öğeleri hizala: "merkez",
İçeriği haklı çıkar: "merkez",
esnek Yön: "sıra",
},
kare: {
arka plan rengi: "#FF0000",
Genişlik: 98,
yükseklik: 98,
marj: 6,
},
});
ihracatvarsayılanişlevUygulama() {
geri dönmek (hizalaKendini: "esnek uç" }]} /> hizalaKendini: "esnek başlangıç" }]} />
)
}
İşte sonuç:
Diğer Flexbox Özellikleri
React Native'de bir esnek kutu düzeni oluştururken kullanabileceğiniz iki özellik daha vardır:
- flexWrap: Bir konteynerin çocuklarının dışarı taşması durumunda. Kullanmak flexWrap tek bir satırda küçültülmeleri veya birden çok satıra sarılmaları gerekip gerekmediğini belirtmek için. için olası değerler flexWrap vardır şimdi rap Ve dürüm.
- açıklık: Kullandığınız açıklık kapsayıcıdaki ızgara öğeleri arasına boşluk ekleme özelliği. Değeri, öğeler arasında istediğiniz boşluğun boyutu olmalıdır. belirtebilirsiniz açıklık mülk px, em veya rem gibi CSS birimlerini kullanma.
React Native Hakkında Daha Fazlasını Öğrenin
Artık flexbox'ı anladığınıza ve onu React Native uygulamanızda esnek ve duyarlı mizanpajlar oluşturmak için nasıl kullanacağınızı bildiğinize göre, React Native'in inceliklerine inmenin zamanı geldi.