React Native · pelajaran 7
Layar lipat: tata letak yang mengikuti ukuran
Satu HP, dua layar
Duo Fold punya layar luar 468 × 677 pt saat terlipat. Saat dibuka, layar dalamnya 954 × 668 pt: lebih lebar daripada tingginya. Tekan 3D, lalu ⇤⇥ Buka. Modelnya terbuka, aplikasi muncul di layar dalam, dan angka ukuran di atas daftar ikut berubah.
useWindowDimensions
const { width } = useWindowDimensions();
const lebar = width >= 600;Hook ini membaca ukuran layar dan merender ulang komponen setiap kali ukurannya berubah. Ini sama seperti useState, hanya saja yang mengubahnya adalah HP, bukan tombol. Lihat tab Komponen saat melipat: App berkedip dengan alasan render baru.
Hindari Dimensions.get('window') di badan komponen. Nilainya dibaca sekali dan tidak membuat komponen dirender ulang saat layar berubah.
Pola daftar + detail
Di layar sempit, cukup tampilkan daftar. Di layar lebar, tampilkan daftar di kiri (lebar tetap) dan isi di kanan (flex: 1), berdampingan dengan flexDirection: 'row'. Komponen IsiPesan sudah disiapkan di App.tsx.
Misi
Saat terlipat, tampilkan satu kolom (testID kolom). Saat terbuka, tampilkan dua kolom berdampingan: daftar dan isi pesan yang dipilih. Saat dicek, playground melipat dan membuka HP sendiri.
Selanjutnya: Berkas adalah navigasi: Expo Router · Semua pelajaran