[REACT NATIVE] react navigation 정리

※ react navigation 6.x 기준입니다.

react native 개발하면서 매번 쓰지만 매번 까먹어서 구글링하는 부분들
정리해서 올립니다.

1. navigate to Tab navigator

react navigation 에서 Tab navigator 로 navigate 할 때 기본적으로 initialRoute 로 넘어간다.

종종 initialRoute 말고 다른 탭의 screen 으로 넘어가고 싶을 때가 있는데, 매번 방법을 까먹어서 이렇게 정리하게 되었다.

navigation.navigate('Tab', { screen: "ScreenName" } )

2. navigation stack reset 방법

screenName에는 이동할 스크린 이름을 넣으면 된다.

routes 에 's' 가 붙음에 주의하자.

navigation.reset({routes: [{name: "screenName", params: { ... }}]})

3. Drawer Navigator 구현 방법

navigator 로 drawer를 쓸 것은 아니지만 drawer를 그냥 하나의 스크린으로 사용하고 싶을 때,

drawer stack로 사용하는 stack navigator를 감싸서 사용할 수 있다.

drawer는 DrawerStack.Navigator 의 drawerContent 에서 사용하면 된다.

const MainStack = createNativeStackNavigator();
const DrawerStack = createDrawerNavigator();

const MainStackScreens = () => {
  return (
    <MainStack.Navigator screenOptions={myOptions}>
      <MainStack.Screen name="Tab" component={Tab} />
    </MainStack.Navigator>
  );
};

const DrawerStackScreens = () => {
  return (
    <NavigationContainer theme={myTheme}>
      <DrawerStack.Navigator
        screenOptions={globalScreenOptions}
        drawerContent={({ navigation }: any) => <MyDrawer navigation={navigation} />}
        >
        <DrawerStack.Screen
          name="MainStackScreens"
          component={MainStackScreens}
          options={myOptions}
        />
      </DrawerStack.Navigator>
    </NavigationContainer>
  );
};

4. navigation focus 감지

navigation focus를 감지하고 싶을 때 react navigation 에서 제공하는 편한 방법이 있다.

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
    //화면으로 들어왔을 때
    React.useCallback(() => {
      console.log('들어옴')

      return () => {
        //화면에서 나갈 때
        console.log('나감')
      };
    }, []),
  );