การนำทาง (navigation) ทำงานอย่างไรใน React Native? · ฝึกสัมภาษณ์งาน IT

การนำทาง (navigation) ทำงานอย่างไรใน React Native?

React Native ไม่ได้มีการนำทางมาในตัว — โซลูชันมาตรฐานคือ React Navigation (ไลบรารียอดนิยม) สำหรับการย้ายระหว่างหน้าจอ มันมี navigator (stack, tabs, drawer) และจัดการ navigation state, ประวัติ และทรานซิชัน

React Navigation — ไลบรารีมาตรฐาน

text

Navigation isn't built into React Native → use REACT NAVIGATION (the de facto standard):
  → provides NAVIGATORS that structure how users move between screens:
    STACK navigator → push/pop screens (like a stack — forward/back, the most common)
    TAB navigator → bottom/top tabs (switch between sections)
    DRAWER navigator → a side drawer menu
  → handles navigation state, history (back stack), transitions, headers

ตัวอย่างการนำทางแบบ stack

jsx

// define screens in a stack navigator
const Stack = createNativeStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// navigate between screens (the navigation prop is passed to screens)
function HomeScreen({ navigation }) {
  return <Button title="Go to Details"
    onPress={() => navigation.navigate('Details', { itemId: 42 })} />;  // navigate + pass params
}

text

→ PARAMS — pass data when navigating: navigation.navigate('Details', { itemId: 42 })
  read in the target: route.params.itemId
→ navigation.goBack() — go back; the stack handles the back button automatically
→ Combine navigators (e.g. tabs containing stacks) for complex app navigation

การนำทาง (navigation) ทำงานอย่างไรใน React Native?

React Navigation — ไลบรารีมาตรฐาน

ตัวอย่างการนำทางแบบ stack

การส่งข้อมูลและการย้อนกลับ

ทำไมจึงสำคัญ