React Native · pelajaran 6
Layout di iPhone: area aman, flex, dan FlatList
Area aman
Lihat judul “Warung Kita”: ia tertutup Dynamic Island. Aplikasi native menggambar di seluruh layar, termasuk di balik kamera dan garis home. Bagian yang aman untuk konten disebut safe area. Di iPhone 18 Pro, area ini dimulai 62 pt dari atas dan berakhir 34 pt dari bawah.
SafeAreaView memberi padding sebesar itu secara otomatis. Pilih elemennya di tab Layout dan lihat padding hijaunya.
Flexbox di React Native
Setiap View sudah memakai flexbox, dengan dua perbedaan dari web:
flexDirectiondefault-nya'column': anak menumpuk ke bawah. Di web default-nyarow.flex: 1berarti “ambil bagian sisa ruang”. Tiga anak denganflex: 1mendapat lebar yang sama.
baris: { flexDirection: 'row', gap: 10 },
kotak: { flex: 1, height: 72 },Pilih induk kotak di tab Layout. Panah biru menunjukkan sumbu utamanya: ↓ untuk column, → untuk row.
Daftar panjang: FlatList
ScrollView + map merender semua item sekaligus. Itu tidak masalah untuk 12 menu, tapi berat untuk 10.000. FlatList hanya merender item yang terlihat (plus sedikit cadangan):
<FlatList data={MENU} keyExtractor={(m) => String(m.id)} renderItem={({ item }) => <Baris menu={item} />} />Misi
- Bungkus layar dengan
SafeAreaView, supaya judul (testIDjudul) tidak tertutup. - Buat tiga kotak (testID
kotak) sebaris, sama lebar, dan berjarak. - Tampilkan menu dengan
FlatList.
Selanjutnya: Layar lipat: tata letak yang mengikuti ukuran · Semua pelajaran