React Navigation

React Navigation 공식문서

설치/기본설정

1. react navigation 설치
   • npm i @react-navigation/native
2. 의존성 패키지 추가 설치
   • expo install react-native-screens react-native-safe-area-context
3. NavigationContainer 로 전체 앱을 감싸준다.

import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <NavigationContainer>
			...
    </NavigationContainer>
  );
}

---

📌 with Typescript

• 코드 작성 전 아래와 같이 RootStackParamList 타입을 생성하여, 각 페이지 별 param으로 전달 할 데이터를 사전에 정의한다.
• 아래 정리 된 예시 코드에서 param이 불필요한 경우 RootStackParamList 부분은 ParamListBase 로 대체 하여 간단히 작성 할 수 있다 import { ParamListBase } from "@react-navigation/native"

export type RootStackParamList = {
  HomePage: undefined;
  MyPage: {
    userId: string;
    nickname: string;
  };
  Setting: undefined;
};

---

페이지 생성 및 이동

🔗React Navigation Pattern & Nested Navigation - 다양한 네비게이션 종류에 대한 추가 포스팅 참고

expo install @react-navigation/native-stack

1. createNativeStackNavigator() 로 네비게이션 스택을 생성한다

2. 생성 된 스택에서 제공하는 Screen 컴포넌트로 페이지를 생성

3. 생성 된 Screen 들을 Navigator로 감싼다.

    // App.tsx
    import { NavigationContainer } from "@react-navigation/native";
    import { createNativeStackNavigator } from "@react-navigation/native-stack";
   
    import HomeScreen from "../screens/HomeScreen"
    import MyPageScreenfrom "../screens/MyPageScreen"
    import SettingScreen from "../screens/SettingScreen"
   
    import { RootStackParamList } from "../types"
   
    const Stack = createNativeStackNavigator<RootStackParamList>();
   
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="HomePage">
            <Stack.Screen name="HomePage" component={HomeScreen} />
            <Stack.Screen name="MyPage" component={MyPageScreen} />
            <Stack.Screen name="Setting" component={SettingScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

4. 스택에 Screen으로 설정 된 컴포넌트는 navigation 관련 Props를 매개변수로 전달 받는다.

    type ScreenProps = NativeStackScreenProps<RootStackParamList>;
    
    const HomeScreen = ({ navigation }: ScreenProps) => {
    	const navigationHandler = () => {
    		navigation.navigate("MyPage", {userId: "user123", nickname: "user"})
    	}
    	
    	return (
    		...
    	)
    }

    type ScreenProps = NativeStackScreenProps<RootStackParamList, "MyPage">;
    
    const MyPageScreen = ({ route }: ScreenProps) => {
      return (
        <View>
          <Text>user nickname is... {route.params.nickname}</Text>
        </View>
      );
    };

Navigation Hooks

메인 screen 컴포넌트가 아닌 하위 컴포넌트에서 navigation 관련 메서드 사용 시 props drilling을 방지하지 위해 관련 Hooks 사용 권장

useNavigation()

import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../types"

const HomeScreen = () => {
	const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
	
	navigation.navigate("Setting"); // 페이지 이동
	navigation.navigate("MyPage", { userId: "userId123", nickname: "user" }); // 페이지 이동 + params
	navigation.goBack(); // 뒤로가기
	
	return (...)
}

useRoute()

import { useRoute, RouteProp } from "@react-navigation/native";
import { RootStackParamList } from "../types"

const MyPageScreen = () => {
	const route = useRoute<RouteProp<RootStackParamList , 'MyPage'>>()
	 
	return (
	    <View>
	      <Text>nickname is...</Text>
	      <Text>{route.params.nickname}</Text>
	    </View>
	);
}