Stack Navigator: ano ito, stack navigation sa React Native

Ano ang Stack Navigator?

Stack Navigator — isa sa mga pangunahing navigator ng React Navigation library na nagpapatupad ng stack model ng mga screen. Nagbibigay ito ng navigation na pamilyar sa mga mobile user: ang pagbubukas ng bagong screen ay may kasamang animation mula sa kanan, at ang «Bumalik» na buton o swipe gesture ay nagbabalik sa user sa nakaraang screen. Ang Stack Navigator ay sinusuportahan sa iOS at Android, gamit ang native na mga bahagi ng platform para sa maximum na pagganap.

Ang React Navigation ay ang pinakasikat na navigation library para sa React Native, na naka-install sa 85% ng mga proyekto (ayon sa data ng npm, 2026). Ang Stack Navigator ay bahagi ng core nito at available sa dalawang implementasyon: createNativeStackNavigator (native, inirerekomenda) at createStackNavigator (JavaScript, para sa kumplikadong custom na animation). Ang native na bersyon ay lumabas sa React Navigation v5 at naging pamantayan sa v6+.

Ang pangunahing bentahe ng Stack Navigator — natural na pag-uugali, pamilyar sa mga gumagamit ng iOS at Android. Sa iOS, ang stack ay biswal na kinakatawan bilang UINavigationController, sa Android — bilang FragmentManager na may slide animation. Hindi kailangang manu-manong ipatupad ng developer ang stack logic — awtomatikong pinamamahalaan ng navigator ang mga estado ng screen, back stack, at mga animation.

Paano gumagana ang stack navigation

Stack navigation ay batay sa prinsipyo ng LIFO (Last In, First Out). Kapag nagbukas ang user ng bagong screen, inilalagay ito ng navigator sa ibabaw ng stack. Kapag pinindot ang «Bumalik», ang pinakaitaas na screen ay tinanggal at nakikita ng user ang nauna. Maaaring maglaman ang stack ng anumang bilang ng mga screen — ang limitasyon ay memorya lamang ng device.

Ang bawat screen sa stack ay nagpapanatili ng estado nito. Sa pagbabalik sa nakaraang screen, awtomatikong naibabalik ang estado nito. Ito ay nagpapakilala sa stack mula sa iba pang mga uri ng navigation (Tab, Drawer), kung saan ang mga screen ay maaaring muling likhain. Pinamamahalaan ng React Navigation ang estado sa pamamagitan ng sarili nitong mekanismo ng navigation context.

Swipe gesture para bumalik

Sa iOS, sinusuportahan ng Stack Navigator ang swipe gesture mula sa kaliwang gilid ng screen para bumalik — ito ang karaniwang pag-uugali ng iOS na inaasahan ng mga user. Sa Android, ang gesture ay naka-disable bilang default, ngunit maaaring i-enable sa pamamagitan ng opsyon na gestureEnabled. Sa Native Stack, ang gesture ay gumagana nang native, walang pagkaantala sa JavaScript thread.

Native Stack kumpara sa JS Stack

Nag-aalok ang React Navigation ng dalawang uri ng Stack Navigator: Native Stack (createNativeStackNavigator) at JS Stack (createStackNavigator). Ang pangunahing pagkakaiba ay ang lugar ng pagpapatupad ng animation. Gumagamit ang Native Stack ng native na animation driver ng iOS at Android, habang ang JS Stack ay gumagana sa pamamagitan ng JavaScript thread ng React Native. Ang pagpili sa pagitan ng mga ito ay depende sa mga kinakailangan sa pagganap at pag-customize.

Native Stack ay inirerekomenda para sa karamihan ng mga proyekto. Nagbibigay ito ng makinis na 60 FPS animation nang hindi hinaharangan ang JS thread, sinusuportahan ang system swipe gesture sa iOS, at gumagamit ng native na transition — slide sa iOS, fade sa Android. Gayunpaman, limitado ang Native Stack sa pag-customize ng animation: isang paunang natukoy na set ng mga transition lamang ang available.

JS Stack ay nagbibigay ng buong kontrol sa mga animation sa pamamagitan ng cardStyleInterpolator. Maaaring lumikha ang developer ng anumang animation: pag-scale, pag-ikot, parallax, custom na curve. Disbentaha — ang mga animation ay tumatakbo sa JS thread, na maaaring magdulot ng pagbaba ng frame sa mahihinang device sa mga kumplikadong transition. Para sa 70% ng mga proyekto, sapat na ang Native Stack.

// Native Stack — inirerekomendang implementasyon
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Pag-install at pag-configure ng Stack Navigator

Upang magsimula sa Stack Navigator, kailangang i-install ang React Navigation at mga dependency nito. Kasama sa minimal na set ang @react-navigation/native, @react-navigation/native-stack, at react-native-screens. Pagkatapos ng pag-install, ang app ay binabalot sa NavigationContainer — konteksto na nagbibigay ng navigation state sa lahat ng child component.

# Pag-install ng mga dependency ng React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Para sa iOS — pag-install ng pod
cd ios && pod install && cd ..

Pagkatapos ng pag-install, nilikha ang Stack.Navigator na may mga tinukoy na screen sa RootStackParamList. Ang bawat screen ay konektado sa isang React component sa pamamagitan ng component prop. Ang navigator ay maaaring root o naka-nest sa ibang navigator (Tab, Drawer). Para sa configuration, ginagamit ang screenOptions — karaniwan para sa lahat ng screen o indibidwal para sa bawat isa.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Home' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Mga parameter at pag-customize ng Stack Navigator

Stack Navigator ay nag-aalok ng maraming opsyon para sa pag-customize ng hitsura at pag-uugali. Ang mga pangunahing parameter ay itinatakda sa pamamagitan ng screenOptions sa antas ng Navigator o options sa antas ng Screen. Maaaring i-configure ng developer ang pamagat, animation ng transition, swipe gesture, estilo ng card, at pagdidilim ng background. Ang flexibility ng mga setting ay nagpapahintulot sa navigation na maiangkop sa design system ng app.

Custom na animation sa pamamagitan ng cardStyleInterpolator

Para sa JS Stack, pinapayagan ng cardStyleInterpolator ang paglikha ng arbitraryong transition animation sa pagitan ng mga screen. Ito ay isang makapangyarihang tool para sa pagpapatupad ng mga natatanging visual effect: pag-scale, pag-ikot, parallax, horizontal flip. Ang function ay tumatanggap ng kasalukuyang halaga ng progress ng animation (current, next) at nagbabalik ng mga estilo para sa mga elementong ini-animate.

Pag-type ng navigation gamit ang TypeScript

Stack Navigator ay sumusuporta sa kumpletong pag-type sa pamamagitan ng TypeScript. Para dito, tinukoy ang RootStackParamList — isang uri-objek kung saan ang mga key ay mga pangalan ng screen at ang mga value ay mga uri ng parameter. Pagkatapos ng pag-type, ang navigation.navigate at route.params ay nakakakuha ng autocomplete at type checking. Ito ay nag-aalis ng mga error sa pagpapasa ng parameter sa yugto ng compilation.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Naka-type na screen
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Produkto {id} — {category}</Text>
      <Button title="Sa cart"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Mga advanced na sitwasyon: modal window at grupo

Stack Navigator ay sumusuporta sa pagpapangkat ng mga screen at modal window. Ang mga grupo (Screen Group) ay nagpapahintulot sa paglalapat ng mga karaniwang setting sa maraming screen nang walang pag-uulit. Ang mga modal window ay ipinatutupad sa pamamagitan ng stack presentation: 'modal' — ang screen ay bubukas mula sa ibaba na may pagdidilim ng background, tulad ng system modal sa iOS. Ang opsyon na ito ay available lamang sa Native Stack.

Para sa kumplikadong navigation, ang Stack Navigator ay maaaring i-nest sa Tab Navigator o Drawer Navigator. Halimbawa, ang tab na «Home» ay naglalaman ng sarili nitong stack ng mga screen, at ang tab na «Profile» — sarili nito. Ang ganitong komposisyon ng mga navigator ay karaniwang approach para sa production app. Ang bawat stack ay nakahiwalay: ang back stack sa loob ng isang tab ay hindi nakakaapekto sa iba pang tab.

// Nested na stack sa Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Mga grupo ng screen na may pinagsamang opsyon
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>