React Native Navigation + TypeScript Props 설정

이번에 새로운 앱을 또 만들면서 타입스크립트로 진행했는데
navigation을 할때 문제가 생겼다. 

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name={'Main'}
      component={Main}
      options={{
        headerShown: false
      }}
    />
    ...

기본적인 navigation 소스를 작성하고 Main 페이지에서 Props 받았는데 

navigation 이 에러가 났다. 타입스크립트다 보니 역시 타입을 지정해줘야겠다 생각했는데 
근데 뭘로 지정해야하는건지 막막했다.

내가 원하는 페이지 는 일단 2개 이다. Main 페이지와 Excercise 페이지이다.

export type RootStackParamList = {
    Main: undefined;
    Exercise: undefined;
};

원하는 페이지 네임을 type 으로 생성해준다.

const Stack = createStackNavigator<RootStackParamList>()

Stack의 제네릭을 RootStackParamList 로 지정해준다.

const Main = ({navigation}:StackScreenProps<RootStackParamList>) => {

...
// 원하는 이벤트에 
navigation.navigate('Exercise')

Main에 타입 지정을 StackScreenProps로 해주고 제네릭은 아까 생성한 RootStackParamList로 한다.
그후 navigaion.navigate로 원하는 페이지로 이동할수 있다.