7MenengahPertemuan ke-7

Navigation & Routing

Implementasi navigation antar screen menggunakan React Navigation library.

Topik Pembelajaran

  • ▪React Navigation setup
  • ▪Stack navigation
  • ▪Tab navigation
  • ▪Drawer navigation
  • ▪Deep linking
  • ▪Passing parameters antar screen
  • ▪Navigation state management

Referensi & Sumber Daya

React Navigation DocsNavigation Stack

Navigation & Routing

React Navigation Setup

Install React Navigation dan dependencies:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/bottom-tabs

Stack Navigation

Sequential screen transitions dengan back button.

const Stack = createNativeStackNavigator();

Tab Navigation

Bottom tabs atau top tabs untuk switch antara screens.

const Tab = createBottomTabNavigator();

Drawer Navigation

Hamburger menu untuk navigation.

Passing Parameters

Navigate dengan data:

navigation.navigate('Details', { id: 123 })

Deep Linking

Link langsung ke screen tertentu dari external apps atau URLs.

Navigation State

Access dan manipulate navigation state dengan hooks.