Manfaatkan flexbox untuk membangun tata letak yang fleksibel dan responsif di React Native.

Flexbox adalah alat CSS yang memungkinkan Anda membuat tata letak satu dimensi yang fleksibel. Ini memungkinkan Anda untuk mengontrol posisi elemen dalam wadah sehingga Anda memiliki kontrol lebih besar untuk menampilkan konten Anda di layar.

Tutorial ini menunjukkan cara menggunakan flexbox di React Native untuk membangun tata letak yang fleksibel dan responsif. Anda akan mempelajari cara memposisikan item turunan dari elemen penampung menggunakan properti flexbox.

Membandingkan Perilaku Flexbox di React Native dan Web Development

Jika Anda ingin mengatur konten elemen penampung menggunakan flexbox di CSS biasa, Anda perlu menggunakan tampilan: fleksibel Properti.

wadah { menampilkan: melenturkan; }

Tetapi dengan React Native, Anda tidak perlu mengatur tampilan: fleksibel Properti. Ini karena React Native menggunakan flexbox secara default untuk membuat layout.

Berikut adalah beberapa perbedaan yang perlu diingat

instagram viewer
bagaimana perilaku flexbox saat digunakan untuk menyelaraskan elemen HTML di aplikasi web versus bagaimana perilakunya di React Native:

  • flexDirection default ke baris dalam aplikasi web tetapi standarnya adalah kolom di Bereaksi Asli.
  • alignContent default ke menggeliat dalam aplikasi web dan mulai fleksibel di Bereaksi Asli.
  • flexShrink default ke 1 di web dan 0 di React Native.

Menggunakan Properti Flexbox di React Native

Properti Flexbox memungkinkan Anda menjelaskan cara menyelaraskan elemen turunan dari elemen penampung. Anda perlu memahami properti ini untuk membuat tata letak kompleks yang sesuai dengan kebutuhan aplikasi Anda.

1. Menggunakan properti flex di React Native

Itu melenturkan properti menentukan bagaimana Melihat komponen mengisi layar. Properti ini menerima nilai integer lebih besar dari atau sama dengan 0. Nilai menentukan fraksi layar Melihat komponen harus mengambil.

Dalam contoh ini, Anda membuat layar dengan satu tampilan dari Bereaksi Pustaka komponen asli:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
eksporbawaanfungsiAplikasi() {
kembali (
 <>
backroundColor: "#A020F0", melenturkan: 1}} /> 
 </>
 )
}

Inilah hasilnya:

Di sini Anda menetapkan 1 sebagai nilai fleksibel dari Melihat komponen. Itu Melihat komponen memenuhi seluruh layar (100%) karena Anda membagi ruang menjadi satu grup.

Mari kita lihat contoh lain:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
eksporbawaanfungsiAplikasi() {
kembali (

backroundColor: "#A020F0", melenturkan: 1}} />
warna latar belakang: "#7cb48f", melenturkan: 3 }} /> 
 </View>
 )
}

Inilah hasilnya:

Di sini Anda memiliki dua Melihat elemen dalam yang lain Melihat elemen. Anak pertama diatur ke lentur: 1, dan yang kedua disetel ke lentur: 3. Nilai-nilai itu membagi ruang antara kedua anak itu. Yang pertama membutuhkan 1/4 layar sedangkan yang kedua membutuhkan 3/4 layar (Layar dibagi menjadi 4 blok karena 1+3 = 4).

2. Menggunakan properti flexDirection di React Native

Jika Anda melihat tangkapan layar di atas, Anda akan melihat bahwa elemen anak berada di atas satu sama lain. Ini adalah perilaku default dari flexbox di React Native (flexDirection default ke kolom nilai).

Anda juga dapat mengatur flexDirection properti untuk baris, kolom-terbalik, Dan baris-terbalik. Dalam contoh berikut, flexDirection diatur ke baris, oleh karena itu elemen anak ditempatkan berdampingan:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
const gaya = StyleSheet.create({
 wadah: {
 warna latar belakang: "#00FF00",
 melenturkan: 1,
 menyelaraskanItem: "tengah",
 arah fleksibel: "baris",
 },
 persegi: {
 warna latar belakang: "#FF0000",
 lebar: 98,
 tinggi: 98,
 batas: 4,
 },
});
eksporbawaanfungsiAplikasi() {
kembali (




 </View>
 )
}

Inilah hasilnya:

Mengatur flexDirection ke baris-terbalik menempatkan anak-anak berdampingan, tetapi urutannya terbalik. Demikian pula, kolom-terbalik menempatkan anak-anak di atas satu sama lain tetapi dalam urutan yang berlawanan dengan yang ditentukan oleh kolom.

3. Menggunakan justifyContent di React Native

Itu justifyContent properti menyelaraskan elemen anak dari wadah flexbox di sepanjang sumbu utama. Jika flexDirection diatur ke kolom, maka sumbu utama adalah sumbu vertikal. Jika sudah disetel ke baris, lalu mendatar.

Kemungkinan nilai dari justifyContentadalah mulai fleksibel, flex-end, tengah, ruang-antara, ruang-sekitar, Dan ruang-merata.

Dalam contoh berikut, flexDirection diatur ke baris dan justifyContentdiatur ke mulai fleksibel:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
const gaya = StyleSheet.create({
 wadah: {
 warna latar belakang: "#00FF00",
 melenturkan: 1,
 membenarkanKonten: "mulai fleksibel",
 arah fleksibel: "baris",
 },
 persegi: {
 warna latar belakang: "#FF0000",
 lebar: 98,
 tinggi: 98,
 batas: 6,
 },
});
eksporbawaanfungsiAplikasi() {
kembali (




 </View>
 )
}

Inilah hasilnya:

Jika Anda mengubah flexDirection ke kolom, mulai fleksibel berlaku untuk sumbu vertikal. Jadi kotak-kotak itu akan ditumpuk satu sama lain.

Pengaturan justifyContent ke pusat (sedangkan sumbu utama adalah a kolom) memusatkan tiga kotak anak.

4. Menggunakan alignItems di React Native

Itu menyelaraskanItem properti menentukan penempatan item dalam wadah flexbox di sepanjang sumbu sekunder. Ini kebalikan dari justifyContent. Seperti justifyContent memperhatikan keselarasan vertikal, menyelaraskanItem menangani perataan horizontal. Kemungkinan nilai dari menyelaraskanItem adalah mulai fleksibel, flex-end, tengah, Dan garis dasar.

Dalam contoh berikut, flexDirection diatur ke baris Dan menyelaraskanItemdiatur ke mulai fleksibel:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
const gaya = StyleSheet.create({
 wadah: {
 warna latar belakang: "#00FF00",
 melenturkan: 1,
 menyelaraskanItem: "mulai fleksibel",
 arah fleksibel: "baris",
 },
 persegi: {
 warna latar belakang: "#FF0000",
 lebar: 98,
 tinggi: 98,
 batas: 6,
 },
});
eksporbawaanfungsiAplikasi() {
kembali (





 </View>
 )
}

Inilah hasilnya:

Jika Anda mengatur flexDirection properti untuk kolom Dan menyelaraskanItem ke tengah, kotak akan ditempatkan di atas satu sama lain, dan elemen anak-anak akan diratakan tengah.

5. Menggunakan alignSelf di React Native

Itu menyelaraskanSelf properti menentukan bagaimana seorang anak individu harus menyelaraskan dirinya dalam wadah. Itu mengesampingkan menyelaraskanItem, dan nilai yang mungkin adalah mulai fleksibel, flex-end, tengah, Dan garis dasar.

Dalam contoh berikut, kami menetapkan default menyelaraskanItem properti dan menimpanya menggunakan menyelaraskanSelf:

impor Reaksi dari"reaksi"
impor { Lembar Gaya, Tampilan } dari"bereaksi-asli"
const gaya = StyleSheet.create({
 wadah: {
 warna latar belakang: "#00FF00",
 melenturkan: 1,
 menyelaraskanItem: "tengah", 
 membenarkanKonten: "tengah", 
 arah fleksibel: "baris",
 },
 persegi: {
 warna latar belakang: "#FF0000",
 lebar: 98,
 tinggi: 98,
 batas: 6,
 },
});
eksporbawaanfungsiAplikasi() {
kembali (


menyelaraskanSelf: "ujung fleksibel" }]} />
menyelaraskanSelf: "mulai fleksibel" }]} /> 
 )
}

Inilah hasilnya:

Properti Flexbox Lainnya

Ada dua properti lain yang bisa Anda gunakan saat membuat layout flexbox di React Native:

  • flexWrap: Jika anak-anak wadah meluap keluar. Menggunakan flexWrap untuk menentukan apakah mereka harus menyusut pada satu baris atau dibungkus menjadi beberapa baris. Nilai yang mungkin untuk flexWrap adalah nowrap Dan membungkus.
  • celah: Anda menggunakan celah properti untuk menambahkan celah di antara item kisi dalam wadah. Nilainya harus sebesar jarak yang Anda inginkan di antara item. Anda dapat menentukan celah Properti menggunakan unit CSS seperti px, em, atau rem.

Pelajari Lebih Lanjut Tentang Bereaksi Asli

Sekarang setelah Anda memahami flexbox dan mengetahui cara menggunakannya di aplikasi React Native Anda untuk membuat tata letak yang fleksibel dan responsif, saatnya bagi Anda untuk masuk ke seluk beluk React Native.