React Native · pelajaran 8
Berkas adalah navigasi: Expo Router
Folder app/ adalah peta aplikasi
| berkas | URL |
|---|---|
app/index.tsx | / |
app/profil.tsx | /profil |
app/buah/[id].tsx | /buah/1, /buah/2, … (id = “1”, “2”) |
app/(tabs)/… | grup: tanda kurung tidak masuk URL |
app/_layout.tsx | bukan layar: membungkus semua layar di foldernya |
Tab Navigasi menampilkan tabel ini secara langsung dari berkasmu. Buat berkas baru di app/, dan sebuah rute baru muncul.
Layout: Stack
app/_layout.tsx mengembalikan <Stack>. Layar baru ditumpuk di atas layar lama, dengan header dan tombol Kembali. Opsi tiap layar ditulis di <Stack.Screen name="…" options={…} />, atau dari dalam layar itu sendiri, misalnya untuk judul yang bergantung pada data.
Pindah layar
<Link href={`/buah/${item.id}`} asChild>
<Pressable>…</Pressable>
</Link>asChild membuat Link memakai Pressable-mu sebagai tombolnya. Dari kode, kamu juga bisa memakai router.push('/buah/2') atau router.back().
Di layar tujuan, ambil parameternya:
const { id } = useLocalSearchParams(); // dari /buah/2 → id = "2" (string!)Misi
- Buat berkas
app/buah/[id].tsxyang menampilkan nama buah dan#id, dengan judul header berupa nama buahnya. - Di
app/index.tsx, bungkus setiap baris denganLinkke/buah/<id>.
Saat dicek, playground menekan “Mangga”, memeriksa layar detailnya, lalu menekan Kembali.
Ini pelajaran terakhir. Coba main bebas dengan React Native. · Semua pelajaran