Route baru

templates/routes.js · StatusBar

Halaman ini fokus ke panduan route baru di React Native NexaJS, berdasarkan implementasi nyata pada Framework/Development/React/index/templates/routes.js.

Ringkasan Route

Setiap route di file templates/routes.js menggunakan struktur object:

Struktur Route

{
  name: "NamaRoute",
  component: ScreenComponent,
  options: {
    title: "Judul Header",
    headerShown: true,
    statusBar: {
      style: "light" | "dark",
      backgroundColor: "#FFFFFF"
    }
  }
}

Langkah Route Baru

Buat file screen baru, misalnya templates/MyScreen.js.
Import screen tersebut ke templates/routes.js.
Tambahkan object route ke array return getRoutesWithColor(...).
Panggil route dari screen lain dengan navigation.navigate("MyScreen").
Pastikan nama route unik dan cocok persis dengan pemanggilan navigate.

Langkah Implementasi

// 1) import screen
import MyScreen from "./MyScreen";

// 2) tambahkan ke getRoutesWithColor return
{
  name: "MyScreen",
  component: MyScreen,
  options: {
    title: "My Screen",
    headerShown: true,
    statusBar: {
      style: "dark",
      backgroundColor: "#FFFFFF"
    }
  }
}

Contoh Nyata dari routes.js

Di implementasi saat ini, route utama adalah Home, User, dan page, lalu route modul digabung dengan spread seperti PageOauth, PageComponents, dan PageApplication.

Cuplikan Real

return [
  { name: "Home", component: HomeScreen, options: { headerShown: false } },
  { name: "User", component: UID, options: { headerShown: true } },
  { name: "page", component: halaman, options: { headerShown: false } },
  ...updateRoutesWithColor(PageOauth, colors, statusBarStyle),
  ...MenuComponents,
  ...updateRoutesWithColor(PageComponents, colors, statusBarStyle),
  ...updateRoutesWithColor(PageApplication, colors, statusBarStyle)
];

StatusBar dan Warna

File routes.js punya helper getStatusBarStyle(), updateRoutesWithColor(), dan updateOptionsWithColor() untuk menyesuaikan warna header/status bar berdasarkan properti aplikasi.

Background terang biasanya pakai style: "dark".
Background gelap/berwarna biasanya pakai style: "light".
Jika properti dinamis tersedia, nilai style bisa diturunkan otomatis.

Troubleshooting

Jika route tidak terbuka, cek typo pada name vs navigate(...).
Jika screen kosong, pastikan import komponen benar dan default export valid.
Jika perubahan tidak terbaca, restart Metro/Expo untuk bersihkan cache.
Jika status bar tidak sesuai, cek object options.statusBar dan helper warna.