Cara Menggunakan Flexbox di React Native
Table of content:
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.
Baca Juga:
container { display: flex; } 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 tentang perilaku flexbox saat digunakan untuk menyelaraskan elemen HTML di aplikasi web versus 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 bilangan bulat yang lebih besar dari atau sama dengan 0. Nilai menentukan pecahan layar Melihat komponen harus mengambil.
Dalam contoh ini, Anda membuat layar dengan tampilan tunggal dari pustaka komponen React Native:
import React from "react"
import { StyleSheet, View } from "react-native"export default function App() {
return (
<>
<View style={{ backroundColor: "#A020F0", flex: 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:
import React from "react"
import { StyleSheet, View } from "react-native"export default function App() {
return (
<View>
<View style={{ backroundColor: "#A020F0", flex: 1}} />
<View style={{ backgroundColor: "#7cb48f", flex: 3 }} />
</View>
)
}
Inilah hasilnya:
Di sini Anda memiliki dua Melihat elemen dalam yang lain Melihat elemen. Anak pertama diatur ke fleksibel:1dan yang kedua diatur ke fleksibel: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-terbalikDan baris-terbalik. Dalam contoh berikut, flexDirection diatur ke barisoleh karena itu elemen anak ditempatkan berdampingan:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "center",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 4,
},
});
export default function App() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</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 barislalu mendatar.
Kemungkinan nilai dari justifyContent adalah mulai fleksibel, flex-end, tengah, ruang-antara, ruang-sekitarDan ruang-merata.
Dalam contoh berikut, flexDirection diatur ke baris dan justifyContent diatur ke mulai fleksibel:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
justifyContent: "flex-start",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</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, tengahDan garis dasar.
Dalam contoh berikut, flexDirection diatur ke baris Dan menyelaraskanItem diatur ke mulai fleksibel:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "flex-start",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}/>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</View>
)
}
Inilah hasilnya:
Jika Anda mengatur flexDirection properti untuk kolom Dan menyelaraskanItem ke tengahkotak 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 menimpa menyelaraskanItemdan nilai yang mungkin adalah mulai fleksibel, flex-end, tengahDan garis dasar.
Dalam contoh berikut, kami menetapkan default menyelaraskanItem properti dan menimpanya menggunakan menyelaraskanSelf:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}/>
<View style={styles.square} />
<View style={[styles.square, { alignSelf: "flex-end" }]} />
<View style={[styles.square, { alignSelf: "flex-start" }]} />
)
}
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.
Artikel Terkait
